Menu
I have a site-wide main menu, which I'm currently using <nav> for. I also have a submenu, which is right under the main nav and is different for every product on the site. What's the best practice to handle this?
Currently, I have a separate <div id="secondary-nav"> below the main nav. But since they're both within the <header> of the page, I was thinking about having a nested <nav> instead. Is this an OK practice in HTML5?
771
Yes, absolutely. You can have multiple header , nav , and footer tags sans penalty.
The <nav> tag is one of the HTML5 elements. It is used to specify a block of navigation links, either within the current document or to other documents. Examples of navigation blocks are tables of contents, menus, and indexes.
The purpose of this technique is to help users of assistive technology, such as screen readers, to quickly and easility navigate to a section of a page, and to skip over sections of a page that they do not need.
It is important to note that <nav> can be used inside of the <header> element but can also be used on its own. By using <nav> as a way to label our navigation links, it will be easier for not only us, but also for web browsers and screen readers to read the code.
It's perfectly acceptable to use nav there. You may also want to look at aside if it can be removed, or look to use section tags within the nav to better divide up the content. This returns to the whole semantics debate, where my stance is, if it makes sense, do it. It doesn't need to be 100% semantically correct, as no one outside of the people who look at source code will ever know.
160
There is currently nothing in the specs that indicates that nesting navs is not allowed. And seeing as <nav> is a block-level element, there is nothing wrong with nesting them.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
