Dave Woods - Freelance Web Design Warwickshire

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 tags -->
<meta name="keywords" content="">
<meta name="description" content="">
<!-- stylesheets -->
<link rel="stylesheet" href="css/reset.css" type="text/css">
<link rel="stylesheet" href="css/common.css" type="text/css">
<!-- javascript -->
<script src="js/jquery-1.3.2.min.js"></script>
<!--conditional comments -->
<!--[if IE]>
<script src="js/html5.js"></script>
<![endif]-->
</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.

88 comments on “HTML5 Tutorial – Getting Started

  1. Pingback: HTML5 tutorial | Computer Science Student

  2. Pingback: Miromedia Blog - 48 days till Christmas, so here’s a gift

  3. Pingback: 網站製作學習誌 » [Web] 連結分享

  4. Pingback: Using CSS3 Selectors in Internet Explorer

  5. Sjan Evardsson

    I got here via the CSS3 Selectors in IE page, and was looking forward to seeing the html5.js, however the links above (to the template and the zip file) are both 404.

    Any chance that the js is hosted elsewhere?

  6. Dave Woods Post author

    Hi Sjan, Sorry about that. I’ve recently updated the website and some of the additional files in the blog posts had gone missing, I’ve updated the links above now so that they should be working again 🙂

  7. daedana

    Nice on. HTML5 is one of the most important things that will be seen in the near future. Apple has gotten this hype to get really interesting.

    Is Flash dead now? We will see, but untill then keep writing these.

  8. gabriel

    is flash dead now?, i agree with the point of open source code, flash player should be open source, but it isn´t and maybe never will. at the end that really doesn´t matters, flash and action script revolutionized the www experience in all senses. at the end html5 it´s good as well in it´s own terms, so all this comparation between flash and html5 looks wrong to me, as i can see the thing that really makes the both technologies alike is java script and nothing more. java script had been here for many years now, action script it´s based mainly on java script “ECMAScript”, quite similar and very important the both. all this speculation war sounds wrong to me. and by the way i love JS, HTML5, AS3 and PHP5, with the 4 i can build magnificent internet experiences.

  9. Pingback: Learn HTML5: 10 Must Read Lessons

  10. Pingback: Web Computing Resource » HTML5 – The New buzzzzzz

  11. Pingback: HTML5 – CSS Reset

  12. Mike Anderson

    Thanks for the article. There were a few differences between what was on the screen in the demonstration and the template that was downloaded, but it was simple enough to figure out.

  13. Pingback: 15 Easy Guides on Getting You Started with HTML5 | Web Designer Aid

  14. Pingback: HTML5 header element

  15. Pingback: Learn HTML5: 10 Must Read Lessons | Gold Concept - Websites, Mindmaps, Books

  16. Pingback: 15 Excellent Step by Step HTML5 Website Coding Tutorials | Web Designer Aid

  17. How to Start A blog

    Good issues?I’d note that as somebody who actually doesn’t write on blogs much (actually, this may be my first post), I don’t suppose the term ‘lurker’ could be very changing into to a non-posting reader. It’s not your fault the least bit , however possibly the blogosphere may just get a hold of a better, non-creepy identify for the ninety% of us that enjoy reading the content material .

  18. Pingback: Rounded Corners in Internet Explorer Using JQuery

  19. Pingback: Master List of HTML(5)/JS/CSS Resources | Emerging Tech Talk

  20. Pingback: HTML5 Getting Started « tediscript.wordpress.com

  21. Pingback: Anonymous

  22. Pingback: 65 HTML5 Tutorials, Examples and Resources for Web Developers | JournalDev

  23. Pingback: Learning HTML5 and CSS3: Part I – Basics of HTML5 « Joshua Doodnauth's Blog

  24. Pingback: 10 Essential Guides, Resources and Tools for Getting Started with HTML5-Speckyboy Design Magazine | Speckyboy Design Magazine

  25. Pingback: HTML5 Specky Boy | TRACK

  26. Pingback: Getting Started with HTML 5 : Ranjith Siji – Programming the Web

  27. Pingback: 10 Essential Guides, Resources and Tools for Getting Started with HTML5 « Dragon Blog

  28. Pingback: 10 Essential Guides, Resources and Tools for Getting Started with HTML5 | 急急如律令

  29. Pingback: Getting Started with HTML 5 : Mozyapps

  30. Pingback: Building Up your Web Design Education

  31. Pingback: Building Up your Web Design Education | Wbcom Designs | VAPDI

  32. Pingback: Building Up your Web Design Education | Preukson

  33. Issac Maez

    1. Hi there, just became alert to your blog through Google, and found that it’s truly informative. I am gonna watch out for brussels. I¡¦ll appreciate if you continue this in future. Lots of people will be benefited from your writing. Cheers!

  34. Pingback: 180+ HTML5 Tutorials and a Round-Up of HTML5 Round-Ups - WebsitesMadeRight.com

  35. Pingback: 180+ HTML5 Tutorials and a Round-Up of Round-Ups - WebsitesMadeRight.com

  36. Pingback: 270+ HTML5 Tutorials and a Round-Up of Round-Ups - WebsitesMadeRight.com

  37. Pingback: 82 Resources to learn Web Design, Bulgarite.ca.