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.

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.

Authors shouldn't use the aside element to wrap content that's not realted to the section it's defined in. It's content must have some relationship with its surroundings.

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.

X

Are you looking for a place to host your next website? I can help you with that!