Search code examples
htmlaccessibilitysemantic-markup

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

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.

Solution

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