Tuesday, 24 July 2012

nav element in HTML5

Like <header>, <nav> is a section element with a clear purpose.
I have it on the left on this site though it's often placed horizontally above or below the header. Technically you can place it (or them – there can be more than one) anywhere you want, but remember never make it difficult for visitors. One of the most common mistakes beginners – and for that matter, many professionals – make is to not make navigation simple, straight forward and intuitive.
The <nav> element is for "major navigation blocks"*. It can go in the header or article tags (which we will look at next); or it can be on its own. On the left I have it on its own and in the article element the "previous" and "next" links are in nav tags.


Example  :


<!DOCTYPE html>
<html>
<body>
<nav>
<a href="/html/">HTML</a> |
<a href="/html5/">HTML5</a> |
<a href="/css/">CSS</a> |
<a href="/css3/">CSS3</a> |
<a href="/js/">JavaScript</a>
</nav>
</body>
</html>

The <nav> tag defines a section of navigation links.
Not all links of a document must be in a <nav> element. The <nav> element is intended only for major block of navigation links.
Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.

No comments:

Post a Comment