Google+ Followers

3 Sep 2011

HTML5 Series 3 - New Semantics elements article, time, nav, and footer in detail



Article: <article> - A component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently reusable

Examples: Forum post, a magazine article, a user-submitted comment

So any content on the page which is self-explanatory can be placed inside article element. Let's compare earlier and newer markup:

Time: <time> The time element represents either a time on a 24 hour clock, or a precise date. Let's compare the tags:
We can see that time element contains following attributes:
datetime: It is machine readable date time value. Time and time zone can be specified by adding "T" after date.

Nav: <nav> Represents a section of a page that links to other pages or to parts within the page: Only sections that consist of major navigation blocks In particular.

Use cases for nav:
- Motion is limited: a browser add-on allows you to jump to (or jump past) major navigation links
- Sight is limited: Using “screenreader” to go thru the document (screenreader to jump over
the navigation bar and start reading the main content)
SO: Being able to determine navigation links programmatically is important.

Footer:
Footer is a kind of section which contains info such as who wrote it, links to related documents, copyright data, and the like. Let's compare earlier and HTML5 tags:

Footer element can also contain header or hgroup element as we can see in this example of "FAT FOOTER". These days fat footer has replaced site map. We can find all shorts of links in fat footers. See in the this example.


In next post we will look into enhancements to the form elements.