Geek Answers Handbook

HTML5 subvariant semantics

Quick question re: HTML5 nav, in particular, sub-navigation (from a semantic point of view).

I have a <nav> in the header for the main menu. To the left of the standard page I have second level navigation and down the right level of third level (no, I did not design the site). Is there anything I can do HTML5 / ARIA to distinguish 3 menus? Or are they all simple <nav> blocks?

I don’t even think that I need <aside> in the left or right column, since there is no additional information besides these actual menus.

Any thoughts / advice would be highly appreciated.

+8
html nav
source share
2 answers

This may be an old question, but now there is a better answer:

You can mark each navigation section implicitly with headers and use WAI-ARIA attributes explicitly:

 <nav role="navigation" aria-labelledby="firstLabel"> <h2 span id="firstLabel" class="hidden">Main menu</h2> <ul/> </nav> ... <nav role="navigation" aria-labelledby="secondLabel"> <h2 span id="secondLabel" class="hidden">Local pages</h2> <ul/> </nav>

For user agents such as firmware, they may report this as “Local Pages, Navigation” (although they differ in how they are reported).

Learn more on the W3C wiki using labelledby .

+5
source share

I would highlight the navigation sections by providing them with semantically relevant id and placing them in order of importance in the HTML code, in the following lines:

 <body> <nav id="main-navigation"> <!-- The main menu goes here --> </nav> <nav id="sub-navigation"> <!-- The left hand menu goes here --> </nav> <nav id="leaf-navigation"> <!-- The right hand third level menu goes here --> </nav> <section id="content"> <!-- Actual page content --> </section> </body>

In addition, I do not see a real need for further differentiation of the sections. The above approach is easy to understand, should be fairly simple in style and semantically understandable, which is certainly enough for me.

+3
source share

More articles:


All Articles