HTML5 and CSS3 are now able to be used in most modern browsers. You might be thinking to yourself why should I use such new technologies that don’t have complete cross browser compatibility? The answer to that is simple.

As with any job pushing your technical skills in your field will always help you to become a more well-rounded person. Sure HTML5 isn’t widely supported and is vastly changing, but taking the time to learn it and follow it’s changes will surely help you to be more prepared when the technology is finally ready.

HTML5 New Tags

DOCTYPE

The beautiful part about the new way to declare a DOCTYPE is that it’s so simple. It takes one line of code and 15 characters, no more long DOCTYPE s that are hard to remember.

<!DOCTYPE html>

CHARSET

This is a simplified version of the charset property which also helps you to memorize this bit of code.

<meta charset="utf-8">

HEADER

The new header element was created to contain the introductory information of your site.

A header element is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.

The header element will usually contain the primary navigation of your website. Here is an example below of a semantic header section.

<header>
      <nav>
            <ul>
                  <li><a href="#">Home</a></li>
                  <li><a href="#">Portfolio</a></li>
                  <li><a href="#">About Us</a></li>
                  <li><a href="#">Contact</a></li>
            </ul>
      </nav>
</header>

NAV

Normally when creating a site in XHTML I either use a div that has the class of NAV or I give the UL the ID of nav. The new NAV element allows you to section off your navigation.

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

As you saw in the above example the NAV element is being used in the HEADER section which is not necessary but semantic.

 <nav>
     <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">Portfolio</a></li>
         <li><a href="#">About Us</a></li>
         <li><a href="#">Contact</a></li>
     </ul>
</nav>

ASIDE

The new ASIDE element is a bit confusing. It should only be used when it is related to the content around it, but is considered different from it. The official definition from W3C is below.

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

In the example below I used the new ASIDE element as a featured section of the website. It is still related to the content on the page but is “Featured” so the ASIDE element works.

<aside>
         <p>This is some featured content that works well with the new ASIDE element</p>
</aside>

ARTICLE

The ARTICLE element is used for content that is intended to be distributed or reusable.

The article element represents 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 distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

The documentation also addresses when to nest the ARTICLE element in your HTML.

When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.

Inside of the ARTICLE element you can use HEADER and FOOTER elements to separate the content in your article.

<article>
   <header>
      <h2>Article Title</h2>
      <p><time pubdate datetime="2010-3-09T14:28-08:00"></time></p>
   </header>
   <p>This is the main content of the article that is not in the header or the footer of the article.</p>
   <footer>
      <a href="#">Show Comments</a>
   </footer>
</article>

FIGURE

The FIGURE element allows you to have an element that is separate from the content its in and has an optional caption.

The figure element represents some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.

<figure>
   <img src="figure.jpg" alt="figure image" />
   <figcaption>This is a figure</figcaption>
</figure>

HGROUP

The HGROUP element allows you to group heading tags together in essence giving the section more weight.

The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.

<hgroup>
   <h1>Main Title</h1>
   <h2>Subtitle</h2>
</hgroup>

SECTION

The SECTION element allows you to section off content that is nested within content. This is a complicated one because you need to know when to use ARTICLE or the regular DIV tag.

The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading. Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, contact information.

<article>
   <hgroup>
   <h1>Main Title</h1>
   <h2>Subtitle</h2>
   <hgroup>
   <p>This is a description of this main section</p>
   <section>
   <h1>Category 1</h1>
   <p>Description of category 1</p>
   </section>
   <section>
   <h1>Category 2</h1>
   <p>Description of category 2</p>
   </section>
</article>

ADDRESS

The ADDRESS element is used specifically for contact information. Not just site wide contact information but could be per page or per node. This tag is NOT ONLY for a Physical Address it can hold other information.

The address element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole.

<address>
 <a href="#">Joe Bob</a>,
 <a href="#">Matt Smith</a>,
 <a href="#">Contact Info Related to this page</a>
</address>

FOOTER

The FOOTER element is used specifically for sectioning content at the end of a specific section of content. This tag could be used at the end of an article not just as the main footer for your site.

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.

<article>
 <header>
    <h1>Post Title</h1>,
 </header>
    <p>This is the post content</p>
 <footer>
   <p>Comments: 8</p>
 </footer>
</article>

Enabling HTML5 Elements

In order to use these new tags currently you will need to display them block in your CSS, because the browsers don’t really know how to handle them.

header, nav, article, section, footer, figure, aside {
    display: block;
}

Well that’s it for this tutorial on HTML5 if you enjoyed it please promote it to all the social networks you can at the bottom of this page. Start coding for HTML5 now and you will be ready when the switch is finally made.

For more information on HTML visit the W3C documentation here