HTML5 and CSS3, Second Edition

Tip 1

Redefining a Blog Using Semantic Markup

Semantic markup is all about describing content. If you’ve been developing

web pages for a few years, you’ve probably divided your pages into various

regions such as header, footer, and sidebar so that you can more easily identify

the regions of the page when applying style sheets and other formatting.

Semantic markup makes it easy for machines and people to understand the

meaning and context of the content. The new HTML5 markup tags, such as

<section>, <header>, and <nav>, help you do that, as well.

One place you’re sure to find lots of content in need of structured markup is

a blog. You’re going to have headers, footers, multiple types of navigation

(archives, blogrolls, and internal links), and, of course, articles or posts. Let’s

use HTML5 markup to mock up the front page of the blog for AwesomeCo, a

company on the cutting edge of awesomeness.

When we’re all done, we’ll have something that looks like the following figure.

Figure 1—The finished layout

report erratum • discuss

Redefining a Blog Using Semantic Markup • 15

Download from Wow! eBook <www.wowebook.com>