Defining the Page’s Structure

Now that we’ve broken down the basics of our template, let’s start adding some meat to the bones and give our page some structure.
Later in the book, we’re going to specifically deal with adding CSS3 features and other HTML5 goodness; for now, we’ll consider what elements we want to use in building our site’s overall layout. We’ll be covering a lot in this section and throughout the coming chapters about semantics. When we use the term “semantics,” we’re referring to the way a given HTML element describes the meaning of its content.


If you look back at the screenshot of The HTML5 Herald (or view the site online), you’ll see that it’s divided up as follows:■ header section with a logo and title■ navigation bar■ body content divided into three columns■ articles and ad blocks within the columns■ footer containing some author and copyright information

Before we decide which elements are appropriate for these different parts of our page, let’s consider some of our options. First of all, we’ll introduce you to some of the new HTML5 semantic elements that could be used to help divide our page and add more meaning to our document’s structure.