HTML5 Tutorial – Getting Started

HTML5 is coming quicker than a lot of web designers are probably aware. You’ve probably seen the stories that it won’t actually be usable until 2022 but in reality, you can actually start using it today. Not all web browsers support CSS2.1, not all visitors are using software capable of using JavaScript but that doesn’t stop us from using it and it shouldn’t stop you using HTML5 either, and here’s why…

Using progressive enhancement we can start using HTML5 while ensuring that visitors that are using outdated technology will still find your site usable and accessible. I’ve uploaded an example of a simple webpage using HTML5 and below will explain how it differs from HTML4.01 that you’ll be familar with.

It’s also worth mentioning that if you’re used to validating your HTML that I’ve started using Validator.nu as it is specifically for HTML5 however I’m sure the W3C will update their validator at some point soon.

HTML5 doctype

To start using HTML5 you’ll need to use the new HTML5 doctype and all you need is the following snippet of code. Simply place this on the first line of your HTML document and you’re ready to start using HTML5.

<!DOCTYPE html>

Something worth remember at this stage is that the HTML5 doctype allows you to code using XHTML syntax or HTML in strict mode. Gone are the transitional and loose variations of the doctypes though. Personally I use HTML syntax but if you prefer XHTML then that’s fine too but I would recommend keeping things consistent whichever method you use.

The HEAD section

The head section of an HTML5 document will be pretty familiar with anyone used to seeing HTML…

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Page Title</title>  <meta name="keywords" content=""> <meta name="description" content="">  <link rel="stylesheet" href="css/reset.css" type="text/css"> <link rel="stylesheet" href="css/common.css" type="text/css">  <script src="js/jquery-1.3.2.min.js"></script>   </head>

The first thing you’ll notice is that the meta tag for the character set has been simplified somewhat. This was something that I used to copy and paste along with the doctype into a new document as it was a little difficult to remember the full HTML for the character set so this is a welcome change for me.

IE8 HTML5

The other part within the head that you might not be familiar with is the conditional comment which includes an html5.js file. This is basically a work around which enables the styling of HTML5 elements within IE8. Without it and users of IE would simply see content that was unstyled but with a little JavaScript we can make good use of progressive enhancement.

The BODY section

Here’s where things start getting a little more interesting. Instead of nesting a number of div’s to create a layout, we can now take advantage of new HTML5 elements to create a better structure for our pages.

The HEADER and NAV elements

In the example I gave above, the HTML uses the HEADER and NAV elements to contain these elements. The HEADER element can be used to markup the header for the page but could also be used to markup the headers within the content. Personally, I just use the H1, H2 elements but you could technically wrap these within a HEADER element if you wanted. The NAV element can also be used multiple times so you might use it within your HEADER but also for a side navigation, footer links or related links so I’ve given both of these IDs so that they can be styled using CSS independently of any other elements that we add of this type later.

<header id="page-header"> <div id="logo"><a href="/"><img src="images/graphic-logo.gif" alt="Company Name"></a></div> <nav id="main-navigation"> <ul> <li class="current"><a href="#">Home</a></li> <li style="color: red;"><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header>

The ARTICLE, SECTION and HGROUP elements

I’ve also used the ARTICLE element to surround the main content, the SECTION element to contain that section of the page (for example, I could repeat this if I was repeating news articles or blog entries on a home page). The HGROUP element is also used here to group a series of Heading elements (i.e. h1, h2, h3 etc).

<article id="page-content"> <section> <hgroup> <h1>Demonstration of Using HTML5</h1> <h2>An HTML5 Template</h2> </hgroup> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac iaculis erat. Maecenas id fermentum odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sagittis porta mauris, iaculis egestas metus posuere sit amet. Sed ullamcorper orci eu dolor egestas sodales. Donec tempor aliquet pulvinar. Sed sed turpis sapien, ac dictum sem. Phasellus metus leo, gravida in imperdiet sit amet, bibendum id magna. Vivamus ac nunc tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis justo ligula. Suspendisse sodales ultricies consequat. Aenean condimentum eros mi. Duis consectetur placerat vehicula. Fusce vel massa erat.</p> <h2>A demonstration of list items</h2> <ul> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> </ul> <ol> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> </ol> </section> <aside> <h2>Related Content</h2> <p>Aliquam id lorem ac tellus fringilla bibendum et at turpis. In ut auctor justo. Integer ac quam sed est semper hendrerit. Aenean vulputate interdum augue, sed dapibus mi ultricies convallis. Curabitur a nunc nisi, ac ornare nisi. Ut semper placerat accumsan. Cras eu nibh lorem. Sed sit amet ligula vitae orci molestie sollicitudin sit amet at odio. Mauris non elit ac ipsum facilisis eleifend. Maecenas eu velit sit amet neque iaculis dapibus. Integer mollis est id erat dignissim blandit. Quisque malesuada mattis sollicitudin. Pellentesque volutpat pellentesque luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus augue ut sem convallis ullamcorper. Donec vitae magna nec lacus varius pellentesque vel nec diam. Morbi sagittis, magna sit amet sollicitudin ultricies, neque orci fermentum ipsum, non cursus lectus velit at ante. Donec nec neque in sem suscipit faucibus. Aliquam nisi turpis, volutpat quis suscipit in, varius vitae nunc.</p> </aside> </article>

The ASIDE element

In the above code you’ll also notice the ASIDE element, which is used to contain content that relates to the content within the SECTION part of a document and would contain things like links to related content or content pulled from Twitter.

The FOOTER element

Lastly we have the FOOTER element which can be used for the bottom of the content to contain things like copyright information but you can also use it for including author information at the end of a SECTION element so it does have multiple purposes.

Summary

There are more HTML5 elements to get to grips with so I didn’t want to try and cover everything in one article. However, I hope to make this a series of HTML5 posts which goes into much more depth and also explains how I’ve used CSS in the above example to style these new elements and keep markup to a minimal.