HTML5 Tutorial – Getting Started

October 29th, 2009 · 5:21 pm @   -  76 Comments

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.

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • DZone
  • Reddit
  • StumbleUpon
  • Twitter

76 Comments → “HTML5 Tutorial – Getting Started”


  1. Mario

    2 years ago

    Download the HTML5 Zip File Link is bad you have a “/” at the end.


  2. Dave

    2 years ago

    Thanks for spotting that Mario… that’s now been corrected.


  3. HTML5 tutorial | Computer Science Student

    2 years ago

    [...] уже очень много, но этот мне показался неплохим. Знакомство с HTML5. 30 Окт 2009 by [...]


  4. Miromedia Blog - 48 days till Christmas, so here’s a gift

    2 years ago

    [...] Introduction to HTML5: http://www.dave-woods.co.uk/index.php/html5-tutorial-getting-started/ [...]


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

    2 years ago

    [...] HTML5 Tutorial – Getting Started [...]


  6. rpokx

    2 years ago

    I want to quote your post in my blog. It can?
    And you et an account on Twitter?


  7. Using CSS3 Selectors in Internet Explorer

    2 years ago

    [...] that it can be done as progressive enhancement though then I’m all for it and along with the HTML5 JavaScript file we might actually start being able to make use of CSS3 and HTML5 before Microsoft catch up with the [...]


  8. Sjan Evardsson

    1 year ago

    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?


  9. Dave Woods

    1 year ago

    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 :)


  10. daedana

    1 year ago

    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.


  11. gabriel

    1 year ago

    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.


  12. Pavan

    1 year ago

    Nice one. I have added a reference to this post in my website :)


  13. Learn HTML5: 10 Must Read Lessons

    1 year ago

    [...] Read HTML5 Getting Started [...]


  14. Michael

    1 year ago

    Great article on HTML 5…

    Its always good practice though mate to have your own website HTML 5 Valid

    http://html5.validator.nu/?doc=http%3A%2F%2Fwww.dave-woods.co.uk%2Findex.php%2Fhtml5-tutorial-getting-started%2F


  15. Nosy Rat

    1 year ago

    Nice tutorial. Thanks :)


  16. neel

    1 year ago

    Thanks for this simple tutorial. I will like to see some more tutorials about HTML5 and CSS3 on your site.


  17. Abdul Ghani

    1 year ago

    Thanks I want to know is there any Html 5 editor in market like DW or Front Page are they support HTML 5 ?
    lz reply, Thanks.


  18. Gallagher Web Design

    1 year ago

    Nice lesson! Simple and great examples with explanations! I was actually suprized to see most browsers can actually support the header, nav, footer, etc… tags.


  19. Web Computing Resource » HTML5 – The New buzzzzzz

    1 year ago

    [...] HTML5 Tutorial – Getting Started [...]


  20. Surya

    1 year ago

    Good work dear. Thinx for adding file. I am already download it and start to learn it


  21. B.Shah

    1 year ago

    Great Article Dave…


  22. HTML5 – CSS Reset

    1 year ago

    [...] HTML5 CSS so once you’re happy that this all makes sense you might want to take a look at the Getting Started with HTML5 tutorial that I wrote some time ago. It doesn’t go into too much detail but explains how you [...]


  23. Mike Anderson

    1 year ago

    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.


  24. 15 Easy Guides on Getting You Started with HTML5 | Web Designer Aid

    1 year ago

    [...] 14. HTML5 Tutorial – Getting Started [...]


  25. HTML5 header element

    1 year ago

    [...] If you’re new to HTML5 then you might want to start at the following link which will give you an overview and a simple template to get you started: HTML5 Tutorial. [...]


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

    1 year ago

    [...] HTML5 Getting Started [...]


  27. 15 Excellent Step by Step HTML5 Website Coding Tutorials | Web Designer Aid

    1 year ago

    [...] 15. HTML5 Tutorial – Getting Started [...]


  28. How to Start A blog

    1 year ago

    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 .


  29. Rounded Corners in Internet Explorer Using JQuery

    12 months ago

    [...] The HTML is pretty straight forward and uses the code from another article – HTML5 tutorial: Getting Started. [...]


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

    11 months ago

    [...] HTML5 Playground HTML5 Readiness HTML5 Rocks – A resource for open web HTML5 developers HTML5 Tutorial – Getting Started iPhone Safari Dev Stuff -> Tech Javascript Closures Learn HTML5: 10 Must Read Lessons Minimize [...]


  31. HTML5 Getting Started « tediscript.wordpress.com

    11 months ago

    [...] http://www.dave-woods.co.uk/index.php/html5-tutorial-getting-started/ [...]


  32. Anonymous

    11 months ago

    [...] HTML5 Tutorial – Getting Started（HTML 5 入门指导） [...]


  33. 65 HTML5 Tutorials, Examples and Resources for Web Developers | JournalDev

    11 months ago

    [...] 12. HTML5 Tutorial – Getting Started [...]


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

    11 months ago

    [...] HTML5 Getting Started Guide [...]


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

    11 months ago

    [...] Here are 10 essential HTML5 getting started guides, resources and tools:HTML5 Getting Started GuidesGetting Started with HTML5 Tutorial by Dave WoodsA simple tutorial for getting started with HTML5. It holds your hand through starting using HTML5 [...]


  36. HTML5 Specky Boy | TRACK

    11 months ago

    [...] Getting Started with HTML5 Tutorial by Dave Woods [...]


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

    11 months ago

    [...] Getting Started with HTML5 Tutorial by Dave Woods [...]


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

    11 months ago

    [...] A simple tutorial for getting started with HTML5. It holds your hand through starting using HTML5 for your website and web app. It goes through adding the HTML5 doctype, the head and body sections, the header and nav elements, the article, section and hgroup elements, the aside element, and the footer element. Code snippets are included. Getting Started with HTML5 Tutorial by Dave Woods [...]


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

    11 months ago

    [...] Getting Started with HTML5 Tutorial by Dave Woods [...]


  40. Getting Started with HTML 5 : Mozyapps

    10 months ago

    [...] Getting Started with HTML5 Tutorial by Dave Woods [...]


  41. JiGuang

    10 months ago

    Brilliant article!


  42. wordpress developer

    10 months ago

    good one thanks


  43. Building Up your Web Design Education

    10 months ago

    [...] I have found one blog post in particular stands out. The article was written by Dave Woods titled HTML5 Tutorial – Getting Started. This outlines all of the major ideas you’ll need to understand in building your first [...]


  44. Building Up your Web Design Education | Wbcom Designs | VAPDI

    10 months ago

    [...] I have found one blog post in particular stands out. The article was written by Dave Woods titled HTML5 Tutorial – Getting Started. This outlines all of the major ideas you’ll need to understand in building your first [...]


  45. Building Up your Web Design Education | Preukson

    10 months ago

    [...] I have found one blog post in particular stands out. The article was written by Dave Woods titled HTML5 Tutorial – Getting Started. This outlines all of the major ideas you’ll need to understand in building your first [...]


  46. Issac Maez

    10 months ago

    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!


  47. 180+ HTML5 Tutorials and a Round-Up of HTML5 Round-Ups - WebsitesMadeRight.com

    9 months ago

    [...] HTML5 Tutorial – Getting Started (Dave Woods | Oct 29, 2009) [...]


  48. 180+ HTML5 Tutorials and a Round-Up of Round-Ups - WebsitesMadeRight.com

    9 months ago

    [...] HTML5 Tutorial – Getting Started (Dave Woods | Oct 29, 2009) [...]


  49. 270+ HTML5 Tutorials and a Round-Up of Round-Ups - WebsitesMadeRight.com

    9 months ago

    [...] HTML5 Tutorial – Getting Started (Dave Woods | Oct 29, 2009) [...]


  50. 82 Resources to learn Web Design, Bulgarite.ca.

    8 months ago

    [...] HTML5 Tutorial — Getting Started [...]

Newer Comments »

Leave a Reply

Categories

Latest Articles

Facebook

Buy Me a Beer

Welcome

Hi, I'm Dave Woods and am a freelance web designer based in the UK and work for a variety of small and large businesses throughout the world.

I specialise in HTML and CSS using web standards to provide usable, accessible and search engine friendly websites that are designed and delivered to the highest standard.

Latest Comments

Popular Posts