HTML5 Top Navigation was

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


    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.

You might also like
Outline html5 - sectioning content and heading elements
Outline html5 - sectioning content and heading elements ...
3. HTML & HTML5 Introduction to the HEADING tags
3. HTML & HTML5 Introduction to the HEADING tags
Trekkers survive Nepal quake.(Communities)(Two Thurston friends were safe and heading for a pickup location five hours away): An article from: The Register-Guard (Eugene, OR)
Book (The Register Guard)
Police pursuit ends in arrest.(City/Region)(A chase reaches speeds of up to 100 mph on I-5 before heading onto Springfield and Eugene streets): An article from: The Register-Guard (Eugene, OR)
Book (The Register Guard)
Seminoles' streak on the line.(Rose Bowl)(Fifth-year coach Jimbo Fisher has FSU humming heading into today's game): An article from: The Register-Guard (Eugene, OR)
Book (The Register Guard)
Tips for making writing easier: Part 5: quick editing for organization: ordering points by importance and using headings and lists can transform ... Solutions - for People, Processes and Paper
Book (Paper Industry Management Association)
Young boy, mother die from accident injuries.(Accidents)(The Eugene residents were heading to San Francisco with five other family members and friends ... article from: The Register-Guard (Eugene, OR)
Book (Thomson Gale)
Related Posts