 |
| 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?
The article was up to the point and described the information very effectively. Thanks to blog author for wonderful and informative post.
ReplyDeletewebsite designing Pakistan
I think this is an informative post and it is very useful and knowledgeable. therefore, I would like to thank you for the efforts you have made in writing this article.
ReplyDeletewebsite development consultant
This blog is really helpful to deliver updated affairs over internet which is really appraisable. Brand Design
ReplyDeleteI found one successful example of this truth through this blog. I am going to use such information now. Packaging Design Perth
ReplyDeleteSeveral many thanks for share your blog website right here. Brand Design
ReplyDelete