This post was last updated over a year ago, therefore the contents of this post may be out of date.

HTML5 has a handful of new structural elements that are designed to make markup more beautiful and meaningful. You can use these elements today. These tags will replace many of our typical div entries, they don’t really do much and browsers don’t need to explicitly support them. However it takes only a little talent and trickery to make them work even in almighty IE.

So lets me introduce you with the first one..

Header <header>

The header of a section, typically a headline or grouping of headlines, but could may also contain supplemental information about the section.

Nav <nav>

Defines the navigation area, typically a list of links. The nav should be a sibling of the main section, header and footer.

Article <article>

This could be a forum post, a magazine/newspaper article, a blog entry, a user submitted comment, an interactive widget or gadget and or any other independent item of content.

Aside <aside>

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

Section <section>

A section is a thematic grouping of content, typically preceded by header, possibly with a footer after. Sections can be nested inside of each other, if needed, and can hold any amount of typical markup.

Footer <footer>

The footer element represents the footer for the section it applies to. Like the footer we see today it typically contains information about its section such as who wrote it, links to related documents, copyright data.

Are these elements really safe to use now ?

Yes, all of these elements can be used in modern browsers and even those older browsers. This works for the most part because HTML was intended to be extensible, the new elements don’t have to do anything special, they just have to be tolerated & connected with the corresponding styles in the style sheet.

This is something that most browsers deals with on a daily basis. But with saying that there is one browser that has an issues with adding elements in this way and we all know who we talking about the almighty Internet Explorer ! But for once, it is easy to help it along the proper path.

In making IE versions below IE9 to play nicely with HTML5 you just have to include a small JavaScript library called html5shim which enables all of the new elements for IE.

Share

Getting To Know The Structural Tags of HTML5