The Nav Element
With HTML5 came the nav element. A
<nav> block can contain your site’s major page or intra-page links, and can be used to declare a menu, table of contents, or site index.
<nav> element is considered good practice because of its accessible features, but is also useful for styling purposes.
Important As with anything you want visible to users, the
<nav> element must be within the
<body> of the page.
<nav> <!-- Site Links --> </nav> <!-- For example... --> <nav id="main-menu"> <a href="#">Home</a> <a href="#">Gallery</a> <a href="#">About</a> <a href="#">Contact</a> </nav>
Adding Links to the <nav> Element
To add links using HTML structural elements, you’ll need to weigh appearance versus accessibility.
To get a “horizontal” nav without much styling, you can simply add
<a href=""> contents, separated with a visual signifier like:
- vertical bars ( | , written with escape name
- interpunct ( · , written with escape name
- additional spaces ( written with escape name
for each )
However, lists are preferred by screen-reader technologies as it increases the accessibility of the navigation. The “Styling Text” page in the previous subtopic showed you how to display these items horizontally, if preferred.