A recent project I worked on required the use of HTML5, so it forced me to step up and take a look at this new version of HTML and what it had to offer. I’m all for growth and the simplification of things, but there’s also that whole “having to learn something new when the old way works fine” syndrome to deal with as well! It took me about 3 times as long to manipulate the HTML5 code and customize it, as it would have if I had been able to just use my good old XHTML Transitional. Learning curves are fun!
Let’s take a look at some of the new elements HTML5 bring to the table:
The benefits of using these structural elements is mainly due to the fact that they are extremely well defined and provide a great way to semantically structure your document.
To learn more about HTML5, read Smashing Magazine’s article about it here.
The header element contains introductory information to a section or page. This can involve anything from our normal documents headers (branding information) to an entire table of contents.
The nav element is reserved for a section of a document that contains links to other pages or links to sections of the same page. Not all link groups need to be contained within the <nav> element, just primary navigation.
The section element represents a generic document or application section. It acts much the same way a
<div> does by separating off a portion of the document.
The article element represents a portion of a page which can stand alone such as: a blog post, a forum entry, user submitted comments or any independent item of content.
Aside, represents content related to the main area of the document. This is usually expressed in sidebars that contain elements like related posts, tag clouds, etc. They can also be used for pull quotes.
The footer element is for marking up the footer of, not only the current page, but each section contained in the page. So, it’s very likely that you’ll be using the <footer> element multiple times within one page.