Tuesday, March 19, 2013

HTML 5 - Navigation with the nav element

One of the new elements for HTML 5 is the <nav> element which allows you to group together links, resulting in more semantic markup and extra structure which may help screenreaders.


HTML5 nav tag defines the section for navigation links in a document. It is not mandatory to place all the links of a document in nav element, but the major navigational links should be placed under it. This element can be used more than one place within a document. But nav element should be placed in such places in a document so that visitors can easily access the navigational links.

Important point need to be remembered:

HTML5 nav element is supported by latest versions of all web browsers. Internet Explorer 8 or earlier versions of Internet Explorer do not support nav element.


How to use it

You are probably used to using something like

<div id="nav">
<ul>
<li><a.... etc
Or

<ul id="mainNav">
Well, for the sake of your markup, nothing much will change as you will now have something like this

<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>
</nav>

The specification


In the following example, the page has several places where links are present, but only one of those places is considered a navigation section.

<body>
<header>
<h1>Wake up sheeple!</h1>
<p><a href="news.html">News</a> -
<a href="blog.html">Blog</a> -
<a href="forums.html">Forums</a></p>
<p>Last Modified: <time>2009-04-01</time></p>

<nav>
<h1>Navigation</h1>
<ul>
<li><a href="articles.html">Index of all articles</a></li>
<li><a href="today.html">Things sheeple need to wake up for today</a></li>
<li><a href="successes.html">Sheeple we have managed to wake</a></li>
</ul>
</nav>

</header>
<article>
<p>...page content would be here...</p>
</article>
<footer>
<p>Copyright © 2006 The Example Company</p>
<p><a href="about.html">About</a> -
<a href="policy.html">Privacy Policy</a> -
<a href="contact.html">Contact Us</a></p>
</footer>
</body>

There are six items of navigation in the header element there. But only three are in the nav tag. There is no explanation as to what differentiates the first three links with the second three links – both go to different pages and all are in internal to that current site.

See a second example:

<body>
<h1>The Wiki Center Of Exampland</h1>

<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/events">Current Events</a></li>
...more...
</ul>
</nav>

<article>
<header>
<h1>Demos in Exampland</h1>

<nav>
<ul>
<li><a href="#public">Public demonstrations</a></li>
<li><a href="#destroy">Demolitions</a></li>
...more...
</ul>
</nav>

</header>
<section id="public">
<h1>Public demonstrations</h1>
<p>...more...</p>
</section>
<section id="destroy">
<h1>Demolitions</h1>
<p>...more...</p>
</section>
...more...
<footer>
<p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
</footer>
</article>
<footer>
<p><small>© copyright 1998 Exampland Emperor</small></p>
</footer>
</body>

This is a little more helpful as I find the biggest isse of the <nav> element is deciding which sets of links should be classed as major navigation.


Other Possible Uses

Below are a few more examples of other areas of the site in which you might consider using the <nav> element. It is also important to note that while XHTML 2 <nl> element, this hasn’t been replicated in HTML 5 because navigation does not have to take list form, as we’ll see.

  • Table of Contents
  • Previous/next buttons (or pagination)
  • Menu - developers are using the <menu> element for navigation rather than the <nav> element. We thought it best to clarify that <menu> is to be used for a list of commands and is an interactive element and more likely to be used exclusively in Web Applications.


HTML 5 - The header element


Several new tags or elements have been added in HTML5. The header tag (<header>) is one of them. It is used as header of one or more sections or as a header of the document. HTML5 header tag should be used as a container of introductory contents like <h1> – <h6> tags, table of contents, search form, logo etc. with or without navigational links. More than header element can be used in a HTML5 document and it is generally placed at the beginning of the document or <article> tag.

Important points need to be remembered:

1. <header> and <head> tags are completely different.
2. A <header> tag can’t be placed within <footer> or <address> tag. Also header element can’t be placed within another header element.
3. HTML5 header element is supported by latest versions of all web browsers. Internet Explorer 8 or earlier versions of Internet Explorer do not support header element.

There are few HTML5 header tag examples given below:

Below the header tag is used as document header

1 <header>
2 <h1>This is the heading of the page</h1>
3 With some supplementary information
4 </header>
Below the header element is used as article header

1 <article>
2 <header>
3 <h1>Title of this article</h1>
4 By S Ghosh
5 </header>
6 Contents of the article
7 </article>

In summary <header> give us some great added semantic value in order to describe the head of a section.

An Inroduction to HTML 5


HTML5 is the latest version of Hyper Text Markup Language. The version of this language is 5 and it is still under development. The main aim of HTML5 is to increase the latest multimedia support and to decrease the dependency on client side scripting language like JavaScript and third party plugging like Adobe Flash Player etc. HTML5 can be effectively run on low-powered devices such as smart phones, tablets etc. Several new elements like <video>, <audio>, <canvas> etc. have been introduced in HTML5.

HTML5 is being developed in joint collaboration of the Web Hypertext Application Technology Working Group (WHATWG) and World Wide Web Consortium (W3C). As the development of HTML5 are still going on so it is not yet an official standard. No web browser supports all HTML5 elements yet, but popular web browsers like (Firefox, Chrome, Internet Explorer, Safari, Opera etc.) are adding more HTML5 tags support in their latest versions.
HTML5 and CSS3 have become popular tools that help in building a well-defined website. Each of them have many advanced features of their own but nowadays, they are used in combination with each other by expert web designers, to create refined web pages with semantic accuracy. Let us have a look at some advantages of HTML5 and CSS3.
  • The first benefit you get is that the readable codes are semantically accurate. When a web design is not semantically accurate, it cannot attain a good rank. HTML5 and CSS3 help you to overcome this. The readable codes are very simple and easy to understand.

  • The tutorials in the language help designers in developing a better web page. This paves way for the designers to make use of apt tools or elements in the language for a website.

  • Many websites need some extra plug-ins to view the videos in the web page. In case of  HTML5 and CSS3, the audio and video effects are tagged and viewed without the support of third party plug-ins.

  • Using separate codes for the purpose of updations are important for all types of websites. These codes do not give a proper output at times. In HTML5 and CSS3, as the scripting is not necessary
     for validation you can avoid the usage of confusing complex codes.

  • Many browsers do not support all types of web pages but HTML5 and CSS3 help the designer to develop a web page that is compatible even with previous versions of your browsers.
  • Some elements in HTML5 and CSS3 allow you to handle graphics and photos efficiently. These elements use some procedural methodologies to draw up the graphics directly into the browser.

  • Flash applications are bound to cause problems. HTML5 combined with CSS3 provides you with many alternative features to support media. As CSS3 has enhanced itself with many  features, there are many added elements that bring in the wow factor, when it is used with HTML5.

  • Creating Box Shadow requires numerous images and this process is made simple by using these new technologies. The text shadow is an element added to make the webpage more attractive. This can be carried out using the simple codes in CSS3. It makes the web layout very simple.

  • One of the popular elements in web design is the use of rounded corners for buttons, layout elements, menus and much more. Using the ‘border-radius’ property, you can easily create rounded corners.

  • Many websites have contact forms, that help the clients get in touch with the company. Some forms may not be supported by browsers. There are many types of forms designed with HTML5 and CSS3 which have a unique design and are compatible with all the common browsers.

  • Using these technologies you can have full control over the colors in the templates, thereby eliminating the need to use separate codes for the color theme.