A Basic HTML5 Template

A Basic HTML5 Template
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.1
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:

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.