<ASIDE> vs <NAV> for Sidebars, which one is semantically better?
I’ve been researching sidebars as the main navigation for my new project, and it’s left me in a bit of an existential crisis.
Even after going through the accessibility docs, I’m still not sure which approach I should take.
My Understanding.
My understanding is that, semantically speaking, if the sidebar is the only navigation in a website then it should use <NAV> as that's the correct approach in terms of accessibility.
Instead, if the sidebar is one of the navigationS, it should be <aside>.
Am I getting it right?
* Also, is
<aside><nav></nav></aside> actually a thing, or nah?5 Replies
Also, is <aside><nav></nav></aside> actually a thing, or nah
Yes, yes it is. According to the spec, the nav element is flow content, and the aside element is allowed flow content
My understanding is that, semantically speaking, if the sidebar is the only navigation in a website then it should use <NAV> as that's the correct approach in terms of accessibility. Instead, if the sidebar is one of the navigationS, it should be <aside>.Not quite. "The
<nav> HTML element represents a section of a page whose purpose is to provide navigation links…." Doesn't matter where in the page it is, if its purpose is to provide nav links it should be a nav element
-https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/navI can't really speak to which is semantically correct, but Drupal uses a block system, where regions are defined and blocks are added to it. If there are items in that region, then the blocks are displayed, using templates that get include in the main template. The default template uses
<aside>, and if a navigation element is placed in that region, the default template for a navigation block places it inside a <nav><aside><nav>[...]</nav></aside> is a great pattern for this. Any navigation should be in a <nav> element and there's nothing wrong with having multiple on a page, e.g. a primary navigation and breadcrumbsAs usual, it depends, lol.
Yes to
<nav>, for sure... as for using <aside>, maybe (probably?) not.
Aside isn't for if something is visually a sidebar, it's for if the content is only indirectly related to the main content... I'd use an <aside> if I had a "related posts" section in a blog, for example, because those posts are only indirectly related to the main content.
Some sidebars can be asides, but that's like saying some links can be parts of navigations.
Is there a <header> that's being used somewhere? If not, I'd just have the <header> look like a sidebar.
If there is already a header, do you have other content in the sidebar, or is it only the navigation. If it's only the nav, I'd just have the nav as the sidebar with nothing else.Thanks a lot everyone, you made it really easy to understand.
Appreciate it a lot! Wish you a wonderful weekend