aside element
If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.
Table of contents
Description
The aside
element is a container for information considered to be only slightly related to the document or the section it's defined in. In other words, the content of the aside
element should be related to the surrounding content, but not be completely necessary for its comprehension.
The aside
element will typically be found wrapping blogroll links, archive links, a glosary, a list of tweets from the author, or notes, thoughts or ideas that came into the author's mind during the production of the document. Also, you can see perfect examples of aside notes in printed magazines or newspapers, where additional (but not critical) information is provided to enrich the reader's experience.
Examples
In this example we're using the aside
element to enclose a navigational section with links to related websites. You can see how these links are, indeed, related to the document.
<h1>Gary's blog of astrophysics</h1>
<p>Hi all, and welcome to my blog...</p>
<aside>
<nav>
<h1>Related sites</h1>
<ul>
<li><a href="http://science.nasa.gov/astrophysics/">Astrophysics - NASA Science</a></li>
<li><a href="http://www-astro.physics.ox.ac.uk/">Astrophysics | University of Oxford</a></li>
<li><a href="http://aston.exampleblog.com/">Aston's blog of astrophysics</a></li>
<li>...</li>
</ul>
</nav>
</aside>
In the next example, we're inserting an aside
block inside one of the blog entries (contained within an article
element), and therefore, its contents will have to be related to the contents of that entry and not to the page as a whole.
<h1>Gary's blog of astrophysics</h1>
<p>Let's see some of my newest entries...</p>
<article>
<header>
<h1>The Crab nebula</h1>
<p>Published <time pubdate datetime="2014-05-20T16:00-04:00">the last week</time></p>
</header>
<p>The Crab Nebula (catalogue designations M1, NGC 1952, Taurus A) is a supernova remnant and pulsar wind nebula in the constellation of Taurus. Corresponding to a bright supernova recorded by Chinese astronomers in 1054, the nebula was observed later by English astronomer John Bevis in 1731.</p>
<p>...</p>
<aside>
<p>I personally find the coded names (M35, NGC 449 and so on) very confusing. If there could just be enough animals...</p>
</aside>
</article>
Gary's blog of astrophysics
Let's see some of my newest entries...
The Crab nebula
Published
The Crab Nebula (catalogue designations M1, NGC 1952, Taurus A) is a supernova remnant and pulsar wind nebula in the constellation of Taurus. Corresponding to a bright supernova recorded by Chinese astronomers in 1054, the nebula was observed later by English astronomer John Bevis in 1731.
...
Attributes
Global attributes
For information about global attributes refer to this list of global attributes in HTML5.
Events
Global events
For information about global events refer to this list of global events in HTML5.