HTML and CSS Reference
In-Depth Information
Who needs GPS? Giving
the navigation a test drive
Let's give this a try. Go ahead and get the
CSS typed into the bottom of your CSS file,
and then load it in your browser.
Hey, not bad for a first try. We've got a nice
navigation bar that even has the page we're
on—the blog page—highlighted.
But…can we take this even further? After all,
you're in the “modern HTML” chapter and
we haven't used a new element from HTML5
for the navigation yet. As you've probably
guessed, we can improve this by adding a
<nav> element to the HTML file. Doing so
will give everyone (browser, search engines,
screen readers, your fellow web developers)
a bit more information about what this list
really is…
Adding a nav element…
As you already know, there is a <nav> element, and using
it is as simple as wrapping your navigation list with <nav>
opening and closing tags, like this:
Her e's the <nav> starting tag, and we're enclos ing
the entire navigation list within a <nav> elemen t.
<li><a href="index.html"> HOME </a></li>
<li class="selected"><a href="blog.html"> BLOG </a></li>
<li><a href=""> INVENTIONS </a></li>
<li><a href=""> RECIPES </a></li>
<li><a href=""> LOCATIONS </a></li>
Search WWH ::

Custom Search