Navigation
One of the most important parts of any website is the navigation bar. CNN.com has âtabsâ along the top of each page that link to the different news sectionsââTech,â âHealth,â âSports,â etc. Google search results pages have a similar strip at the top of the page enabling you to try your search in different Google servicesââImages,â âVideo,â âMaps,â etc. And our example page has a navigation bar in the header that includes links to different sections of our hypothetical siteââhome,â âblog,â âgallery,â and âabout.â
This is how the navigation bar was originally marked up:
<div id="nav"> <ul> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> <li><a href="#">gallery</a></li> <li><a href="#">about</a></li> </ul> </div>
Again, this is valid HTML5. But while itâs marked up as a list of four items, there is nothing about the list that tells you that itâs part of the site navigation. Visually, you could guess that by the fact that itâs part of the page header, and by reading the text of the links. But semantically, there is nothing to distinguish this list of links from any other.
Who cares about the semantics of site navigation? For one, people with disabilities. Why is that? Consider this scenario: your motion is limited, and using a mouse is difficult or impossible. To compensate, you might use a browser add-on that allows you to jump to (or jump past) major navigation links. Or consider this: your sight is limited, ...
Get HTML5: Up and Running now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.