HTML5 places some emphasis on streamlining the actual markup required to create a page that validates to W3C standards and link all our requisite CSS, JavaScript, and image files. For smart phone users, possibly viewing our pages with limited bandwidth, and a key target for our responsive designs, we want our website to not just respond to their more limited viewport but also load in the fastest possible time. Whilst removing superfluous markup elements represents only a tiny data saving, every little helps!
HTML5 offers further benefits and additional features over the previous iteration of HTML (HTML 4.01). Frontend web developers are likely to be primarily interested in the new semantic elements of HTML5 that provide more meaningful code to search engines. HTML5 also enables feedback to the user on basic site interactivity such as form submissions and so on, often negating the need for more resource heavy JavaScript form processing. Again, that's good news for our responsive design, allowing us to create a leaner and faster-loading code base.
The first line of any HTML document starts with the Doctype (Document Type Declaration) . This is the part that, if we are honest, gets added automatically by our code editor of choice or we can paste it from an existing boilerplate (nobody really enters the full HTML 4.01 Doctype out, do they?) Before HTML5, the Doctype for a standard HTML 4.01 page would have looked as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Now, with HTML5, it's merely as follows:
<!DOCTYPE html>
Now, as I've already conceded, I don't physically type the Doctype every time I write a page, and I suspect you don't either. So, what's the big deal I hear you cry? Well, what about adding links to JavaScript or CSS in your pages? With existing HTML 4.01, the correct way of linking to a script file would be as follows:
<script src="js/jquery-1.6.2.js" type="text/javascript"></script>
HTML5 makes this easier:
<script src="js/jquery-1.6.2.js"></script>
As you can see, the need to specify the type attribute is no longer considered necessary. It's a similar case with linking to CSS files. HTML5 also accepts a far slacker syntax to be considered "valid". For example, <sCRipt SrC=js/jquery-1.6.2.js></script> is just as valid as the prior example. We've omitted the quotation marks around the script source as well as using a combination of upper and lower case characters in the tag and attribute names. But HTML5 doesn't care—it will still validate at the W3C HTML5 validator (http://validator.w3.org/). This is good news if you are sloppy with your code writing but also, more usefully, if you want to shave every possible surplus character from your markup. There are other specifics when it comes to the writing of code that make life easier. But I'm guessing you're not convinced this is all that exciting. So, let's take a quick peek at the new semantic elements of HTML5.
When you're structuring an HTML page, it's standard fare to mark up a header and navigation section something like this:
<div class="header">
<div class="navigation">
<ul class="nav-list">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="About">About</a></li>
</ul>
</div> <!—end of navigation -->
</div> <!—end of header -->However, take a look at how we do it with HTML5:
<header>
<nav>
<ul id="nav-list">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="About">About</a></li>
</ul>
</nav>
</header>How about that? Instead of faceless <div> tags for every structural element (albeit with added class names for styling purposes), HTML5 gives us some far more semantically meaningful elements to use instead. Common structural sections within pages such as header and navigation (and many more as we shall soon see) get their own element tags. Our code just became far more "semantic" with the <nav> tag telling browsers, "Hey, this section right here is for navigation". Good news for us but perhaps more importantly, good news for search engines, too. They'll now be able to understand our pages better than ever before and rank our content accordingly.
When I write HTML pages, I often do so knowing that they will in turn be passed to the backend crew (you know, those cool kids that deal with PHP, Ruby, .NET, ColdFusion, and so on) before the pages ultimately make it to the WWW. To stay on good terms with the backend folks, I often comment the closing </div> tags within the code to enable others (and often myself too) to easily establish where <div> elements end. HTML5 negates much of that task. When looking at HTML5 code, a closing element tag of </header> for example, instantly tells you what element is closing, without the need to add a comment.
We're just lifting the lid a little here on what semantic goodies HTML5 has for us in the toy box. Before we get carried away, we have one more friend to get acquainted with. If there's one thing this whole new era of web design can't exist without, it's CSS3.