Let me start off by saying “Happy new year!” Hope everybody had a terrific holiday season and has now settled back into reality and a normal routine. Am not sure if you guys are into new year’s resolutions but one of mine includes using HTML 5 semantic markup into all (or most) of my new projects.
I like HTML5’s new form input types, video controls, geolocation and offline capabilities but that is not what I will be covering here. My main concern is semantic markup. Instead of <div>s – we can now make use of the new HTML5 structure – <header>, <nav>, <section>, <article>, <footer> and a few more. Now let’s look at the steps we should take to incorporate HTML5 into our project.
- Specify the DOCTYPE. <!doctype html>, that’s it! done.
- Next is to define the character encoding. <meta charset=utf-8>.
- You wouldn’t need to include <html> or <head> or <body> but I prefer it, so we should probably put it in. The minimal structure of an HTML5 document will look like this:
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>HTML5 rocks</title>
</head>
<body>
<p>This is a purely validated HTML5 document.</p>
</body>
</html>
My goal for incorporating HTML5 into my projects is for semantic markup – meaning that the elements define the meaning of the content as closely as possible. In HTML4, the way to do this is to name the classes properly – take for example the HTML4 document below:
<div id="header">
<h1>My BLOG</h1>
</div>
<div id="sidebar">
<ul class="menu">
<li><a href="previous.html">Previous Entries</a></li>
<li><a href="about.html">About Me</a></li>
</ul>
</div>
<div class="post">
<h2>What a Day!</h2>
<p>Happy New Year guys! Today is the first day of 2011 . . . Let's all have a great year together!</p>
</div>
<div id="footer">
<p>Copyright 2011. All Rights Reserved.</p>
</div>
This is what semantic markup meant in HTML4. But now that we have HTML5 – see what we can do:
<header>
<h1>My HTML5 BLOG</h1>
</header>
<nav>
<ul>
<li><a href=”previous.html”>Previous Entries</a></li>
<li><a href=”about.html”>About Me</a></li>
</ul>
</nav>
<article>
<h2>What a Day!</h2>
<p>Happy New Year! Let's all use HTML5!</p>
</article>
<footer>
<p>Copyright 2011. All Rights Reserved.</p>
</footer>
Now as with CSS and Javascript, we all know that it can’t be this easy . . . there is always the issue of cross browser compatibility. And as almost always is the case, IE will not cooperate without some arm twisting – we will need to use Javascript to create these new HTML5 elements.
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('footer');
</script>
To make it easier, you can just include the html5 shiv that will add these elements for you – since you will only need to address IE8 and below – it is better to put it under conditional comments:
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Include the above code before the </head> tag and your HTML5 elements would now be “style-ready”. Aside from IE, older versions of Firefox (v.2) and Camino wouldn’t render HTML5 unless it was perfect XHTML and served as XML. However, upgrading to the newer versions should solve these issues and users of these browsers tend to upgrade their browsers frequently anyway.
As an early adopter of HTML5, there will be bugs . . . but I think it’s worth the effort as HTML5 will be the standard for now and the future.
