The aside element tag provided by HTML5 is used to represent the subsidiary information part of the current page or article, which can include references, sidebars, etc. related to the current page or main content. Advertisements, nav element groups, and other similar sections that are distinct from the main content.
According to the current specification, there are two ways to use the aside element:
is included in the article as ancillary information part of the main content, and the content can be related to Quotes, word lists, etc. related to the current article.
is used outside of article as a global subsidiary information part of the page or site; the most typical form is the sidebar, the content of which can be friendly links and subsidiary navigation. or ad units, etc.
The following code example combines the above two methods of use:
<body><header> <h1>My Blog</h1></header><article> <h1>My Blog Post</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <aside> <!-- Since this aside is contained within an article, a parser should understand that the content of this aside is directly related to the article itself. --> <h1>Glossary</h1> <dl> <dt>Lorem</dt> <dd>ipsum dolor sit amet</dd> </dl> </aside></article><aside> <!-- This aside is outside of the article. Its content is relatedto the page, but not as closely related to the above article --> <h2>Blogroll</h2> <ul> <li><a href="#">My Friend</a></li> <li><a href="#">My Other Friend</a></li> <li><a href="#">My Best Friend</a></li> </ul></aside></body>
Concise version of HTML5 study notes (3): new elements hgroup, header, footer ,address,nav
aside has nothing to do with the sidebar. It represents a tool and has little to do with the core content. (The implication may be that read it later tools or search engines may be able to ignore it)
What is the difference between section article in HTML5? How to understand header footer nav?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
