HTML5 and CSS3, Second Edition

html5_new_tags/index.html

<footerid="page_footer">

<p>Copyright© 2013AwesomeCo.</p>

<nav>

<ul>

<li><ahref="#">Home</a></li>

<li><ahref="#">About</a></li>

<li><ahref="#">Termsof Service</a></li>

<li><ahref="#">Privacy</a></li>

</ul>

</nav>

</footer>

We’ll use CSS to change how both of these navigation bars look, so don’t

worry about the appearance yet. The point of these new elements is to describe

the content, not to describe how the content looks. That’s what CSS is for.

Let’s keep working on the markup.

Sections and Articles

Sections are the logical regions of a page, and the <section> tag is here to

replace the abused <div> tag when it comes to describing logical sections of

a page.

html5_new_tags/index.html

<sectionid="posts">

</section>

Don’t get carried away with sections, though. Use them to logically group

your content! Here we’ve created a section that will hold all the blog posts.

However, each post shouldn’t be in its own section. We have a more appropri-

ate tag for that.

Articles

The <article> tag is the perfect element to describe the actual content of a web

page. With so many elements on a page, including headers, footers, naviga-

tional elements, advertisements, widgets, and social-media sharing buttons,

it might be easy to forget that people come to a site because they’re interested

in the content you’re providing. The <article> tag helps you describe that

content.

So what’s the difference between an <article> and a <section>? Think of a <section>

as a logical part of a document with related content. Think of an <article> as

actual content, such as a magazine article, blog post, or news item. Moreover,

you should be able to syndicate the contents of an article; it should be able

to stand on its own.

report erratum • discuss

Redefining a Blog Using Semantic Markup • 19

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