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