CreateaFreeWebsite  with Responsive Web Design

Nav Element in HTML5

The nav element, a new block element, has been introduced in HTML 5 for defining a better page structure.

<nav></nav> Represents a section of the document intended for navigation.

The nav element is pretty straight forward in purpose.

If it has to do with navigation of any kind place it in a nav element.

You can use it as a standalone tag, or place it in headers, footers, articles, sections and even asides.

It accepts global attributes so that you can use the class attribute and create different styles for different purposes.

Navigation Devices

You can build your navigation device with any available elements like paragaphs or lists. The nav element accepts all.

New Elements and Beginners

Some of the new tags used as shown below might make the body code of a basic HTML5 document easier to read.

This structure can be used instead of using class customized divisions .

<body>
<header></header>
<nav></nav>
<div class="main"></div>
<footer></footer>
</body>

as well as:

<body>
<header><nav></nav></header>
<section class="main"></section>
<footer></footer>
</body>

 

*Use of the new tags article, section, header, footer, hgroup, nav and aside is a matter of the taste or the need of the author.

Note: some of these overlap in purpose.

For a complete list of New Elements visit W3.org

 

See also: Header Element and Footer Element

 

Free Tools and Resources We Recommend

Free Responsive Web Design Certification freeCodeCamp
freeCodeCamp is a proven path to your first software developer job.
More than 40,000 people have gotten developer jobs after completing this – including at big companies like Google and Microsoft.
Finally, you'll learn how to make webpages that respond to different screen sizes by building a Twitter card with Flexbox, and a complex blog layout with CSS Grid.
FREE Certification Courses!!
Free Ebook How to Code in HTML5 and CSS3
"How to Code in HTML5 and CSS3" is a free e-book about making websites in HTML5 and CSS for absolute beginners. It doesn't require any experience in IT to start....
FREE HTML Editor (Windows): NoteTab Light
All the features of a commercial HTML editor.
FREE Apache Server (Windows): IndigoAmpp
Set up a real time server environment right on your PC. Test forms and scripts before uploading to your web space.
Linux Users
If like us, you've left the insane world of Microsoft Windows for the even worse experience of Linux, we recommend the Geany Code Editor. You'll find it in your Linux Mint software repository. It's simple but powerful and FREE.
For image resizing we've found the easiest Linux tool to be Krita.

Have you tried out RWD template kit? Download Template #402 - 6 Page Kit