It All Starts with the Right Doctype
We want to use HTML5’s new elements, and that means we need to let
browsers and validators know about the tags we’ll be using. Create a new
page called index.html, and place this basic HTML5 template into that file.html5_new_tags/index.html
Line 1
<htmllang="en-US"><!DOCTYPEhtml>
2
3 <head>
4 <metacharset="utf-8">
<title>AwesomeCoBlog</title>
</head>5
6
7
8 <body>
9
</html></body>
10Take a look at the doctype on line 1 of that example. This is all we need for
an HTML5 doctype. If you’re used to doing web pages, you’re probably familiar
with the long, hard-to-remember doctypes for XHTML, like this:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Now take another look at the HTML5 doctype:
<!DOCTYPEhtml>That’s much simpler and much easier to remember.
The point of a doctype is twofold. First, it’s to help validators determine what
validation rules an HTML validator needs to use when validating the code.
Second, a doctype forces Internet Explorer versions 6, 7, and 8 to go into
“standards mode,” which is vitally important if you’re trying to build pages
that work across all browsers. The HTML5 doctype satisfies both of these
needs.Notice the <meta> tag on line 4. This specifies the character encoding of our
page. If we want to use Unicode characters, we need to include this at the
top, above any lines that contain any text.With our basic HTML5 template in place, let’s start building out our blog.
Headers
Headers, not to be confused with headings such as <h1>, <h2>, and <h3>, may
contain all sorts of content, from the company logo to the search box. Our
blog header will contain only the blog’s title for now.report erratum • discussRedefining a Blog Using Semantic Markup • 17
Download from Wow! eBook <www.wowebook.com>