3

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.

unor
  • 92,415
  • 26
  • 211
  • 360
Gasim
  • 7,615
  • 14
  • 64
  • 131

1 Answers1

3

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.

unor
  • 92,415
  • 26
  • 211
  • 360
  • Thank you for the help about the navigation but I got a little confused about aside being not placed in the main tag. My aside will be like a sub menu. E.g if a user views an event, he will see a right menu that will show list of all events just because he is in the "events controller", I hope it made sense. Where should I use aside then? – Gasim Aug 31 '14 at 18:59
  • 1
    @Gasim: In that case, the `aside` should not be a child of `article` and not be a child of `main`, as I guess the main content of the page would be the specific event, without the list of links to all events. – unor Sep 01 '14 at 13:25