Search code examples
htmlnavigationnavsemantic-markup

Main navigation in sidebar - which semantic tag to use?


I am stuck in choosing what to use for sidebar navigation. Here is the structure:

<header>
</header>

<main>
   <nav-tag>
   </nav-tag>

   <article>

   </article>

   <aside>

   </aside>
</main>

The aside tag shows content related to article. So it's pointless to use it for a sidebar navigation. Should I add a div tag with id #sidebar and put a nav tag in it? Or should I just add a nav tag with id #sidebar and put the sidebar styles for it? I want to choose latter because without a style it semantically makes sense as its a container that stores an unordered list of links.


Solution

  • Is it navigation? If yes, use nav. It doesn’t matter in which way the navigation is displayed (sidebar, header, footer, hidden, …).

    If it’s the navigation for the whole site, don’t place it in main.

    If it’s the navigation for the specific article only (e.g., a table of contents, or a list to separate article parts), place the nav as child of the article.

    Side note: If the aside is related to the article (instead of the page), it might make sense to include it as child of article. If it doesn’t belong in the article, it should probably also not be placed in main. But all this depends on the actual content and your understanding of it.