HTML5 nav example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id felis et augue sagittis euismod quis at sem. Nunc sit amet magna ac velit congue ultricies. Sed eros justo, lacinia in fringilla sollicitudin, congue id massa. Nunc dignissim bibendum nibh, sed dictum massa pharetra sit amet.

Since the title and the post meta, in this example, are placed at the top and acts as the introduction of the post content, we can wrap them inside the header element.

Nav Element

The nav element stands for Navigation. According to the spec. this element represents; “A section of a page that links to other pages or to parts within the page: a section with navigation links.”

While this element is clearly used for defining navigation specifically, the implementation is not limited to only the primary navigation, typically at the top of the web page. From the official description above, we can conclude that the nav element can also be used on any part of the page that also acts as a navigator, see the following example;

Table of Content

• In this example, we have used nav element to wrap Table of Content, where the links are still pointed to the same page.

  Footer Element

  Another element that is now widely adopted is the footer element. Generally we refer the footer to a section located at the very bottom of the web page, but let’s take a look how the specification describe this element; “The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.”

  That is a bit puzzling, let’s make this thing simpler.

  The footer is (still) logically placed at the bottom. But since the specification did not mention this element to be used exclusively for web footers, we can conclude that the implementation for the footer element may also be used at the end of a section. Let’s see the example below;

  This is the Title of the Content

  10 likes

  In this example, we have extended our post content to have a footer containing post tags and the post ‘Likes’.

  Final Thought

  header, nav and footer are not doing fancy things like the other new HTML5 elements, but these elements are primarily designed to make the web structure more meaningful both for browsers and humans, just like how the World Wide Web inventor, Tim Barners-Lee, think of it.