A quick overview of new tags in HTML5

The more I read about HTML5, the more I like it. But what is new, and how can the new features be used? And more specifically, how is a HTML5 website template different from an XHTML template? In an effort to find a good answer I would like to start with listing new HTML tags that are introduced in HTML5. Tomorrow I will release a new free template created using these tags, so this is a kind of introduction to the code structure of the upcoming design…

Element names that make sense

<section> – The section element is a generic section of a document or application, a thematic grouping of content that contains a heading. The section element is not a generic container element like a <div>. If you create a section for styling purposes or as a convenience for scripting, you should use a <div>. A section element is the right choice when you want that the element’s contents are listed explicitly in the document’s outline (read “<section> is not just a “semantic <div>” to learn more).

<aside> – The aside element is a section of a page that consists of content that is tangentially related to the content around the aside element. We can use aside element for sidebars, for advertising, for groups of nav elements, and for other content that we can consider separate from the main content of the page.

<article> – The article element is a self-contained composition (a forum post, a magazine or newspaper article, a blog entry) in a web page or web application and that is intended to be distributable or reusable. You should use the article element, instead of the section element, when it would make sense to syndicate the contents of the element.

<footer> – The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. It can contain information about its section, links to related documents, copyright dataansd so on. Footer element used for a general site-wide footer and for a article (or section) footer.

<header> – The header element represents a group of introductory or navigational aids, it is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element)

<nav> – The nav element is a section with navigation links. Not all groups of links on your web page need to be within a nav element, only sections that consist of major navigation blocks are appropriate for the nav element.

<address> – The address element represents the contact information for its nearest article.

<time> – The time element it is used to represent a date and/or the time.

How will it work in practice?

I will be writing more about these new tags and the way I will be using them in future templates. The next free template will be made with HTML5, and it is scheduled for release tomorrow. Keep your eyes open for it!

Tag descriptions taken from this excellent presentation.

html5, tutorials