Deka87 Deka87 - 4 months ago 9
HTML Question

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?

Answer

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

Comments