HTML5 Aside Element: Here Are The Good (And Not So Good) Uses For It
- Element of
- HTML Document Structure Before And After HTML5 – Here’s What Changed
- What does
HTML5 Aside Element: Here Are The Good (And Not So Good) Uses For Itdo?
- The <aside> element is used to identify content that is related to the primary content of the webpage, but does not constitute the primary content of the page. Author information, related links, related content, and advertisements are exampes of content that may be found in an aside element.
- semantic | structural
There is actually some confusion and even disagreement over the exact nature and purpose of
<aside>, so let’s look at the HTML5 specification:
The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.
This means that any of the following may be valid uses of the
- bibliography or endnotes
- pull quotes
- editorial sidebars
- additional information
- website sidebars unrelated to the content
The following are most likely not good uses of the
- article post data (byline, publication date, etc.)
- post-specific navigation, such as next and previous or related posts
Note that while the above list is somewhat conjectural, there is one potential use of
<aside> which is specifically prohibited by the specification: parenthetical information within the flow of an article.
<!-- Several potential placements for <aside> --> <body> <main> <article> <header> <h1>Title of Article</h1> <!-- Post Data: Byline, dateline --> </header> <main> <!-- Article Content --> <aside><!-- Pull Quote --></aside> </main> <aside> <!-- Comment Section --> </aside> <footer> <!-- Post Date: Tags, Categories, Navigation --> </footer> </article> </main> <aside> <!-- Website sidebar: Advertising, Post Index, Login Forms --> </aside> </body>
Browser Support for aside