"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
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.
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>
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.
If the content grouping isn't related, it probably shouldn't be a <section>. Consider a <div> instead.
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.
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.
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.