9

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?

Generic website with a green theme. A column of navigation on the left side with logo placeholder atop. A row of action buttons appears centered at the top of the page.

Andria
  • 4,712
  • 2
  • 22
  • 38
PVL
  • 577
  • 1
  • 3
  • 12
  • [HTML5 best practices; section/header/aside/article tags](http://stackoverflow.com/q/4781077/215552). I know, `nav` isn't mentioned, but it tells you want `aside` is. – Heretic Monkey Nov 02 '16 at 21:51
  • @Mike McCaughan I know what Aside or Nav is the problem is I'm a bit confused what to use because most people use aside as main navigation at the left side. – PVL Nov 02 '16 at 21:53
  • And that's quite opinion-based, which is off-topic. If you know what they are, and the solution has to make sense to you, you have to make a decision. – Heretic Monkey Nov 02 '16 at 21:56
  • 2
    I would not discard this question as "opinion-based". Proper understanding of HTML semantics is highly relevant and it becomes clear from the answers that it's not about "do what feels right for you". – wortwart Mar 05 '21 at 16:16

2 Answers2

41

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.

unor
  • 92,415
  • 26
  • 211
  • 360
  • 6
    This makes much sense. I had previously thought `aside` was exclusively meant for sidebar navigation. – JAT86 Apr 01 '18 at 08:08
  • 1
    @unor, what would you have put inside the – Kosem Nov 23 '18 at 12:38
  • 1
    Good answer! I would place advertisement in ASIDE tag, because you don't know what exactly it looks like and it could not be related to your website. – Neckster Feb 27 '19 at 10:20
  • Opened my eyes o_O on aside tag. – Dmytro Y. May 04 '19 at 10:24
  • "aside – Used for tangentially related content. Just because some content appears to the left or right of the main content isn’t enough reason to use the aside element. Ask yourself if the content within the aside can be removed without reducing the meaning of the main content. Pullquotes are an example of tangentially related content." https://stackoverflow.com/a/6527766/1066234 – Avatar Jul 29 '20 at 11:05
  • @Kosem very late reply but best example for aside content would be here on Stack Overflow: the Related questions section. – Silviu Burcea Jan 12 '21 at 09:46
12

This is what I would do:

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

enter image description here

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.

Kolby
  • 2,775
  • 3
  • 25
  • 44
  • This looks like a nice solution. But what if I want to link external website for example "reviews"or "events". As far I know you can't use aside for external links. Safer to go with div then? – PVL Nov 02 '16 at 22:16
  • Aside will still work fine. – Kolby Nov 02 '16 at 22:18
  • Aside will still work fine, but isn't the optimal semantic solution. Still a good answer! – roberrrt-s Nov 03 '16 at 10:31