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.
Excellent article on HTML5.
Thanks!
Thanks…Very good for start learning HTML5
Pingback: 10 Essential Guides, Resources and Tools for Getting Started with HTML5 | Sandip Chavda | Business | Day To Day | Food | News | Education | Entertainment | Movies | Love | Medical | Social Networking | Facebook | Sports | Cricket | Technologies | Internet
nice one…….. great job 🙂
Here is link, well collective resources of HTML5 http://designpulps.x10.mx/?p=56
I’ve just download the zip file here because I want to know how it works. Thank you for this useful tutorial that is posted here.
excellent, crisp, issue. the function you put in to supply such handy
Pingback: Anonymous
Great, thanks
Great Introductory tutorial but i didn’t understand the “Aside” Section, by the way where is the second part; the one which’ll contain css.
Pingback: HTML5资源指南 | Jackchen Design 1984
Pingback: Anonymous
Great article. I’ve struggled finding the motivation to start using HTML5 as I thought it would involve massive redesigns and rewrites, but it appears it’ll be quite easy
one of the best article.
Pingback: Ultimate Collection and a Must-Read HTML5 Tutorials and Resources | Web Design Habits
Good Job. Thanks.
Hi,
very helpful same html5 tutorial and now we can start with beginner stage html5, can you tell me what html5 support dream wear cs3,
thank’s
I enjoyed every moment of reading it.
You are satisfying the people who are on the way to be wise through you rich post. Thanks
hey, your internet page’s style is marvelous and loving it. Your posts are stunning. You should keep up the good work.
Pingback: Blogging Well » Blog Archive » 10 Essential Guides, Resources and Tools for Getting Started with HTML5
very nice article for start in html5
Awesome tutorial. It have many useful for HTML5 beginers.
Thank you for sharing.
Great for me
Pingback: 37+ HTML5 Tutorials, Articles/Tips & Tools Roundup | Tutorials Share | Photoshop RoundUps, Vector RoundUps, Code RoundUps, Funny RoundUps
Thanks…Very good for start learning HTML5
Great tutorial.Thanks for sharing this….
Indeed..very nice article. Thanx
Pingback: HTML5 Article Element
Nice tutorial…. 🙂
Pingback: 10 Best HTML5 Website Layout Coding Tutorials
Pingback: Best HTML5 Website Layout Coding Tutorials
Pingback: Learn HTML5: HTML5 Tutorials and Guides | Vandelay Design Blog
Pingback: Learn HTML5: HTML5 Tutorials and Guides | CS5 Design
Good html 5 article. will be great for my new web site. Thanks
Pingback: CSS3HTML5 » Learn HTML5: HTML5 Tutorials and Guides
Pingback: The ultimate HTML5 resource guide « iTechTunes
Pingback: HTML5 Tutorial – Getting Started | ReeZh Design
Pingback: The ultimate HTML5 resource guide | Webdesigner Depot