CODEWITHSUNDEEP
html
sdvnksv
sdvnksv

Reputation: 9668

Sidebar navigation: which tag is semantically correct?

I have a sidebar with navigation links in a template I am building for an admin dashboard, something like: 

<aside>
  <ul>
   <li><a href="#">...</a></li>
  </ul>
</aside>
<main>
 ...
</main>

I wonder if using an <aside> tag was semantically correct, or should I use <nav> instead?

Upvotes: 9

Views: 6873

Answers (2)

Mohammad Kermani
Mohammad Kermani

Reputation: 5396

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. html5doctor

And

Do not use the element to tag parenthesized text, as this kind of text is considered part of the main flow. Mozilla

Here is the best simple example about how to use aside:

<article>
  <p>
    The Disney movie <em>The Little Mermaid</em> was
    first released to theatres in 1989.
  </p>
  <aside>
    The movie earned $87 million during its initial release.
  </aside>
  <p>
    More info about the movie...
  </p>
</article>

Before, I saw HTML structure of some popular websites like Spotify, they are using div for their sidebar. But if you like to read more, you should take a look at Best HTML5 markup for sidebar

Upvotes: 0

Paul S.
Paul S.

Reputation: 66324

It is for navigation, use <nav>

The HTML <nav> element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

Compare against <aside>, which does not mean what you think it means;

The HTML <aside> element represents a section of the page with content connected tangentially to the rest, which could be considered separate from that content.

So, <aside> means more "side note" rather than "side bar".

If you wanted, you could use <aside> to section the side bar then a <nav> inside it to contain the navigation links

Upvotes: 13

Related Questions