Semantic differences between <nav> and <aside> for navigation in HTML [closed]

Question

From what I've learned, it is semantic to place your navigation links and elements within a <nav>. However, I have also seen many people putting their navigation links and elements within an <aside> when their navigation content is beside the page's main content.

In the way I'm currently developing my website, I have "CHECK-IN", "CHECK-OUT", and "BOOK NOW" in a <header> and multiple navigation links in a <nav> along the left side of the page.

Should I keep my navigation content inside of a <nav> or place it inside of an <aside>? Which one is semantically correct and most accessible?

Answer 1

You shouldn’t use aside in this case.

It is your navigation, so the nav element is obviously the best choice here.

There is no point in using the aside element just because something gets displayed in a sidebar. The choice whether to use aside should depend on the content and its purpose in context, not on the CSS.

aside is for "tangentially related" content, but the primary navigation is hardly only "tangentially" related to the document.

Answer 2

This is what I would do:

The red box would be the aside and inside of that, the blue box, would be the nav.

Here's a good blog post that covers the semantics of these tags. It comes down to your layout. An aside is normally a small column that sites next to the main content of the layout. A nav will be any list of links that serves the purpose of navigating. I usually think of aside as a larger container and a nav as just a listing of links. This is all very much semantics and very opinion based.