Using section tags to structure areas of a page_HTML5 Multimedia Development Cookbook-QQ阅读中文玄幻网

上QQ阅读APP看书，第一时间看更新

Using section tags to structure areas of a page

"The <section> element represents a generic document content block or an application block. A <section>, in this context, is a thematic grouping of content, typically with a heading. " - WHATWG's HTML5 Draft Standard - http://whatwg.org/html5

Getting ready

Let's add the new <section> tags for each of the primary areas of Roxane's single-page portfolio site. These <section>s will then be used as containers, each with a heading and generic content that will contain her biographical information, work examples, and contact methods.

How to do it...

The use of the new <section> tag can be tricky. There are a number of things it isn't, but only certain things that it is.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Roxane</title>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>[endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<hgroup>
<h1>Roxane is my name.</h1>
<h2>Developing websites is my game.</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#About">About</a></li>
<li><a href="#Work">Work</a></li>
<li><a href="#Contact">Contact</a></li>
</ul>
</nav>
<section id="About">
<h3>About</h3>
<p>I'm a front-end developer who's really passionate about making ideas into simply dashing websites.</p>
<p>I love practical, clean design, web standards give me joyful chills, and good usability tickles the butterflies in my stomach.</p>
</section>
<section id="Work">
<h3>Work</h3>
<p>sample 1</p>
<p>sample 2</p>
<p>sample 3</p>
</section>
<section id="Contact">
<h3>Contact</h3>
<p>email</p>
<p>phone</p>
<p>address</p>
</section>
</body>
</html>

How it works...

We've used the new <section> tag not as a generic replacement for the <div>, but instead in the semantically correct way as a related grouping that usually contains a heading.

There's more...

If the content grouping isn't related, it probably shouldn't be a <section>. Consider a <div> instead.

Section doesn't equal div

Remember: If it doesn't have a <header>, it probably doesn't need a <section>. Use <section> to group content, but <div> when grouping items purely for stylistic reasons.

Section guidelines

Still aren't sure if <section> is the right tag to use? Remember these guidelines:

Are you using it solely for styling or scripting? That's a <div>.
If any other tag is more appropriate, use it instead.
Use it only if there's a heading at the start of the content.

Still evolving

HTML5 is a constantly evolving set of standards. The latest bit of guidance from the WHATWG suggests:

"Authors are encouraged to use the <article> element instead of the <section> element when it would make sense to syndicate the contents of the element."

Publishing an about page? That's probably going to be a good <section> candidate.