The Truth About a Basic HTML5 Web Page
Let’s start with the first line of a web page. It’s now just this:
<!doctype html>
That’s it. It’s short, it’s memorable, and it triggers standards mode in all major browsers (including IE6). It’s also case insensitive. In HTML5 the opening <html> tag has also been simplified to <html lang="en">.
Browsers will cope without the lang attribute, but it’s good practice to specify the page’s primary language, especially for non-English pages. (See this helpful article on declaring languages in HTML5: http://nimbupani.com/declaring-languages-in-html-5.html.)
Next comes the <head> tag, which will contain our <title>, <meta>, CSS, and JavaScript tags as per usual. You don’t actually need to specify <head> tags if you want to be ultra-minimal (see Bruce Lawson’s minimal HTML5 document discussion here: www.brucelawson.co.uk/2010/a-minimal-html5-document/), but we will.
Inside our <head> tags we have this:
<meta charset="utf-8">
This specifies the character encoding for the page. Again, it’s been reduced to the simplest form possible in HTML5. You should always specify this for security reasons (there’s a technical discussion at http://code.google.com/p/doctype-mirror/wiki/ArticleUtf7), and it should come before the <title> tag.
<meta name="description" content="My HTML5 Website">
This hasn’t changed. Google and other search engines sometimes use this tag in their search results pages, but not for rankings. (You can forget all about <meta content="keywords">, though. Search engines have been ignoring it for years. We’ll look at markup and SEO in Chapter 6.)
For more on meta tags Google does understand, see www.google.com/support/webmasters/bin/answer.py?answer=79812.
The <title> tag hasn’t changed
To link CSS and JavaScript files, we can just use this:
<link rel="stylesheet" href="styles.css">
and this:
<script src="myscript.js"></script>
There’s no need to specify type="text/css" or type="text/javascript" anymore—the browsers assume it anyway.
We can start using these techniques now. There’s no harm in them; they just make it simple enough to start writing our documents from memory. (The old techniques will continue to work, though—probably forever.)
So, a basic HTML5 page (with basic body content) looks like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="My HTML5 Website">
<title>My HTML5 page</title>
<link rel="stylesheet" href="mystyles.css">
<script src="myscript.js"></script>
</head>
<body>
<h1>My HTML5 Page</h1>
</body>
</html>
As you can see, it’s pretty much what we’re used to, just simpler.
Here are a few things to note about how we write HTML in HTML5:
- Quotes are optional. You no longer need to quote attribute values, so you can write <meta charset=utf-8> or <div class=myclass> if you like. I prefer quoting values, but HTML5 leaves it up to you.
- It’s case-insensitive. You can write your markup in upper or lowercase, or even in a mix like <DiV ClAsS=VaLuE> if you really hate your co-workers and/or feel nostalgic for YoUr WaCkY MySpAcE days.
- Closing slashes are optional. You no longer need to close stand-alone tags with a closing slash (for example, <meta charset=utf-8 />). As you probably guessed, this was a relic of the move to XML. Likewise, <br> and <br /> are both perfectly valid—it’s up to you.
If you’re a stickler for XHTML’s stricter syntax (always writing in lowercase, quoting attribute values, and closing stand-alone tags), you can keep doing it—it will always be happily supported.
What About an HTML5 Shim and CSS for the New Elements?
HTML5 introduces new elements such as <nav>, <header>, <article>, <section>, and so on. These sound fine in theory but are terrible in practice.
To support these elements in IE6–8, others suggest you include a small script that tells IE6–8 these elements exist and to use whatever styles you specify for them (it will leave them unstyled otherwise). I don’t recommend using these new elements, so we don’t need the HTML5 shim. (If you really want to use them, here’s the code to do it: http://code.google.com/p/html5shiv/. But seriously, don’t use the new elements. You’ll thank me later.)
You also need to set the new elements to display: block;, as shown in this HTML5doctor.com boilerplate: http://html5doctor.com/html-5-boilerplates/. Again, don’t use these elements. (You’ll see why in the next two chapters.)
What About the HTML5 Boilerplate and Modernizr?
If you want an everything-and-the-kitchen-sink boilerplate for new HTML5 pages, check out http://html5boilerplate.com/ and the markup documentation at https://github.com/h5bp/html5-boilerplate. (There’s more documentation in the wiki.)
While I appreciate the effort put into the HTML5 Boilerplate, if you’re just finding your way with HTML5, it’s pretty intense. I prefer to start simple and work with my own bare-minimum approach. But if you prefer the start-with-everything-and-delete-what-you-don’t-want approach, the HTML5 Boilerplate may be right up your alley.
Modernizr (www.modernizr.com/) is a handy script for detecting support for HTML5 and CSS3 features. (It doesn’t add support; it only detects it.) It’s become a staple for designers who live on the bleeding edge and experiment with new features, so if that’s what you’re interested in, check it out. (We’ll talk more about Modernizer, and the merits of feature detection rather than browser detection, when we look at HTML5’s web application features in Chapter 12.)
Well, that was easy. Almost too easy. Now let’s take a big left turn into the proverbial ditch that is the new structural tags.