As you learn HTML5 and add new techniques to your toolbox, youāre likely going to want to build yourself a blueprint, or boilerplate, from which you can begin all your HTML5-based projects. In fact, youāve probably already done something similar for your existing XHTML or HTML 4.0 projects.
We encourage this, and you may also consider using one of the many online sources that provide a basic HTML5 starting point for you.
In this project, however, we want to build our code from scratch and explain each piece as we go along. Of course, it would be impossible for even the most fantastical and unwieldy sample site we could dream up to includeĀ everyĀ new element or technique, so weāll also explain some new features that donāt fit into the project. This way, youāll be familiar with a wide set of options when deciding how to build your HTML5 and CSS3 websites and web apps, so youāll be able to use this book as a quick reference for a number of techniques.
Letās start simple, with a bare-bones HTML5 page:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<!--[if lt IE 9]>
<script data-after="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<script data-after="js/scripts.js"></script>
</body>
</html>Look closely at the above markup. If youāre making the transition to HTML5 from XHTML or HTML 4, then youāll immediately notice quite a few areas in which HTML5 differs.
The Doctype
First, we have the Document Type Declaration, orĀ doctype. This is simply a way to tell the browserāor any other parsersāwhat type of document theyāre looking at. In the case of HTML files, it means the specific version and flavor of HTML. The doctype should always be the first item at the top of all your HTML files. In the past, the doctype declaration was an ugly and hard-to-remember mess. For XHTML 1.0 Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">And for HTML4 Transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">Over the years, code editing software began to provide HTML templates with the doctype already included, or else they offered a way to automatically insert one. And naturally, a quick web search will easily bring up the code to insert whatever doctype you require.
Although having that long string of text at the top of our documents hasnāt really hurt us (other than forcing our sitesā viewers to download a few extra bytes), HTML5 has done away with that indecipherable eyesore. Now all you need is this:
<!doctype html>Simple, and to the point. Youāll notice that the ā5ā is conspicuously missing from the declaration. Although the current iteration of web markup is known as āHTML5,ā it really is just an evolution of previous HTML standardsāand future specifications will simply be a development of what we have today. Because browsers have to support all existing content on the Web, thereās no reliance on the doctype to tell them which features should be supported in a given document.
TheĀ htmlĀ Element
Next up in any HTML document is theĀ htmlĀ element, which has not changed significantly with HTML5. In our example, weāve included theĀ langĀ attribute with a value ofĀ en, which specifies that the document is in English. In XHTML-based syntax, youād be required to include anĀ xmlnsĀ attribute. In HTML5, this is no longer needed, and even theĀ langĀ attribute is unnecessary for the document to validate or function correctly.
So hereās what we have so far, including the closingĀ </html>Ā tag:
<!doctype html>
<html lang="en">
</html>TheĀ headĀ Element
The next part of our page is theĀ <head>Ā section. The first line inside theĀ headĀ is the one that defines the character encoding for the document. This is another element thatās been simplified. Hereās how you used to do this:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">HTML5 improves on this by reducing the character encodingĀ <meta>Ā tag to the bare minimum:
<meta charset="utf-8">In nearly all cases,Ā utf-8Ā is the value youāll be using in your documents. A full explanation of character encoding is beyond the scope of this chapter, and it probably wonāt be that interesting to you, either. Nonetheless, if you want to delve a little deeper, you canĀ read up on the topic on the W3Cās site.
To ensure that all browsers read the character encoding correctly, the entire character encoding declaration must be included somewhere within the first 512 characters of your document. It should also appear before any content-based elements (like theĀ <title>Ā element that follows it in our example site).
Thereās much more we could write about this subject, but we want to keep you awakeāso weāll spare you those details! For now, weāre content to accept this simplified declaration and move on to the next part of our document:
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/styles.css?v=1.0">In these lines, HTML5 barely differs from previous syntaxes. The page title is declared the same as it always was, and theĀ <meta>Ā tags weāve included are merely optional examples to indicate where these would be placed; you could put as manyĀ metaĀ elements here as you like.
The key part of this chunk of markup is the stylesheet, which is included using the customaryĀ linkelement. At first glance, you probably didnāt notice anything different. But customarily,Ā linkĀ elements would include aĀ typeĀ attribute with a value ofĀ text/css. Interestingly, this was never required in XHTML or HTML 4āeven when using the Strict doctypes. HTML5-based syntax encourages you to drop theĀ typeattribute completely, since all browsers recognize the content type of linked stylesheets without requiring the extra attribute.
Leveling the Playing Field
The next element in our markup requires a bit of background information before it can be introduced.
HTML5 includes a number of new elements, such asĀ articleĀ andĀ section, which weāll be covering later on. You might think this would be a major problem for older browsers, but youād be wrong. This is because the majority of browsers donāt actually care what tags you use. If you had an HTML document with a<recipe>Ā tag (or even aĀ <ziggy>Ā tag) in it, and your CSS attached some styles to that element, nearly every browser would proceed as if this were totally normal, applying your styling without complaint.
Of course, this hypothetical document would fail to validate, but itĀ wouldĀ render correctly inĀ almostĀ all browsersāthe exception being Internet Explorer. Prior to version 9, IE prevented unrecognized elements from receiving styling. These mystery elements were seen by the rendering engine as āunknown elements,ā so you were unable to change the way they looked or behaved. This includes not only our imagined elements, but also any elements which had yet to be defined at the time those browser versions were developed. That means (you guessed it) the new HTML5 elements.
At the time of writing, Internet Explorer 9 has only just been released (and adoption will be slow), so this is a bit of a problem. We want to start using the shiny new tags, but if weāre unable to attach any CSS rules to them, our designs will fall apart.
Fortunately, thereās a solution: a very simple piece of JavaScript, originally developed by John Resig, can magically make the new HTML5 elements visible to older versions of IE.
Weāve included this so-called āHTML5 shivāĀ in our markup as aĀ <script>Ā tag surrounded byĀ conditional comments. Conditional comments are a proprietary feature implemented by Microsoft in Internet Explorer. They provide you with the ability to target specific versions of that browser with scripts or styles.Ā This conditional comment is telling the browser that the enclosed markup should only appear to users viewing the page with Internet Explorer prior to version 9:
<!--[if lt IE 9]>
<script data-after="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->It should be noted that if youāre using a JavaScript library that deals with HTML5 features or the new APIs, itās possible that it will already have the HTML5 enabling script present; in this case, you could remove reference to Remy Sharpās script. One example of this would beĀ Modernizr,Ā a JavaScript library that detects modern HTML and CSS featuresāand which we cover in AppendixĀ A,Ā Modernizr. Modernizr includes code that enables the HTML5 elements in older versions of IE, so Remyās script would be redundant.
Of course, thereās still a group of users who wonāt benefit from Remyās HTML5 shiv: those who have, for one reason or another, disabled JavaScript. As web designers, weāre constantly told that the content of our sites should be fully accessible to all users, even those without JavaScript. When between 40% and 75% of your audience uses Internet Explorer, this can seem like a serious concern.
But itās not as bad as it seems. A number of studies have shown that the number of users that have JavaScript disabled is low enough to be of little concern.
In oneĀ studyĀ conducted on the Yahoo network, published in October 2010, users with JavaScript disabled amounted to around 1% of total traffic worldwide.Ā Another studyĀ indicated a similar number across a billion visitors. In both studies, the US had the highest number of visitors with JavaScript disabled in comparison to other parts of the world.
ThereĀ areĀ ways to use HTML5ās new elements without requiring JavaScript for the elements to appear styled in nonsupporting browsers. Unfortunately, those methods are rather impractical and have other drawbacks.
If youāre still concerned about these users, it might be worth considering a hybrid approach; for example, use the new HTML5 elements where the lack of styles wonāt be overly problematic, while relying on traditional elements likeĀ divs for key layout containers.
The Rest is History
Looking at the rest of our starting HTML5 template, we have the usualĀ bodyĀ element along with its closing tag and the closingĀ </html>Ā tag. We also have a reference to a JavaScript file inside aĀ scriptelement.
Much like theĀ linkĀ element discussed earlier, theĀ <script>Ā tag does not require that you declare aĀ typeattribute. In XHTML, to validate a page that contains external scripts, yourĀ <script>Ā tag should look like this:
<script data-after="js/scripts.js" type="text/javascript"></script>Since JavaScript is, for all practical purposes, the only real scripting language used on the Web, and since all browsers will assume that youāre using JavaScript even when you donāt explicitly declare that fact, thetypeĀ attribute is unnecessary in HTML5 documents:
<script data-after="js/scripts.js"></script>Weāve put theĀ scriptĀ element at the bottom of our page to conform to best practices for embedding JavaScript. This has to do with the page loading speed; when a browser encounters a script, it will pause downloading and rendering the rest of the page while it parses the script. This results in the page appearing to load much more slowly when large scripts are included at the top of the page before any content. This is why most scripts should be placed at the very bottom of the page, so that theyāll only be parsed after the rest of the page has loaded.
In some cases (like the HTML5 shiv) the script mayĀ needĀ to be placed in theĀ headĀ of your document, because you want it to take effect before the browser starts rendering the page.
