 |
| ASIDE-TAG-IN-HTML5 |
<aside> Tag in HTML5
Introduction of <aside> Tag in HTML5
In <aside> tag of HTML5, content is shown which is related to the surrounding content. This tag is mostly used as a sidebar. It is defined inside the <body> tag.
For example, there is an article on your webpage. You can create an <aside> element with it and show other links and images related to this article. This tag can also be used to show an advertisement or a profile of the author.
The <side> tag is also defined in the <article> tag. In that situation, the article related content is shown in this tag. As if something that has been emphasized in the article is shown as a quote.
The content of the <aside> tag is related to the surrounding content but is not important. It depends on the user whether he wants to use it or not.
The behavior of the <aside> tag is similar to the <div> tag both look the same. But their meanings are different. Content within the div is not necessarily related to main page content. But the contents of the <aside> tag are related to the main page content.
Syntax of <aside> Tag
The general syntax of the lower <aside> tag is given below.
<aside>
// Other block level
</ aside>
<aside> is a block level element. In this tag you can use the second block level (<p>, <h1> etc.) and inline elements (<span>, <a> etc.).
Here, you can also apply CSS styles to the <aside> element.
aside
{
position: fixed;
top: 20%;
left: 0;
background-color: #ccc;
color: white;
background-color: #ccc;
color: white;
}
As you can see in the syntax which is given above, the position property has been applied to the <aside> tag. Similarly, you can apply other properties on this tag and design it accordingly.
Attributes of <aside> Tag
There are no attributes available specifically for <aside> tags. You can also use all global attributes such as id and class with <aside>.
<aside id = "author-profile">
....
....
</aside>
....
....
<aside id = "related-links">
....
....
</aside>
Events Related to <aside> Tag
<aside> tag supports all event attributes of HTML such as onclick, onmouseover, etc.
<aside onmouseover = "script-code">
....
....
</aside>
How to use aside tag in html5?
Example of <aside> tag
In the above example, Some links related to the content of the tag are represented as a sidebar by the <aside> tag. The <aside> tag is fixed by CSS, close to the content in the left.
This script generates the output as below.
Previous:- How to use details tag in html5?
This script generates the output as below.
 |
| ASIDE-TAG-HTML5-EXAMPLE |
Previous:- How to use details tag in html5?
Next:- How to use figure tag in html5?
Posts
0 comments:
Post a Comment
Thank you for reading the post.