Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I'm a bit confused by the new HTML5 element, <section>. What is the correct way to use it?
Consider this outline:

<article>
  <header>
    <h2>Title</h2>
    <p>Spiffy tagline</p>
  </header>
  <section>
    <p>My content! BLA BLA BLA YADDA YADDA</p>
    <p>Some more content!</b>
  </section>
</article>

Does it make sense?
What if I had smaller articles, with just a title and a brief text? Would it be (semantically, spec-wise, etc.) to omit the section?

share|improve this question
add comment

2 Answers 2

up vote 2 down vote accepted

If you don't need sections (have small articles) you can just use a bare <article> entity around your content. And when you don't, the section can wrap sub-titles and paragraphs in those sections.

Check out the html5 section specs.

Example:

<header>
  <h1>Blog Posts</h1>
</header>
<article>
  <header>
    <h1>Article Header</h1>
    <h2>My Awesome Stuff!</h2>
  </header>
  <p>My content! BLA BLA BLA YADDA YADDA</p>
  <p>Some more content!</b>
</article>
<article>
  <header>
    <h1>Article 2 Header</h1>
    <h2>More of My Awesome Stuff!</h2>
  </header>
  <section>
    <header>
      <h1>Getting started</h1>
    </header>
    <p>Getting started text</p>
  </section>
  <section>
    <header>
      <h1>Now you're underway</h1>
    </header>
    <p>Underway text</p>
  </section>
  <section>
    <header>
      <h1>Wrapping up</h1>
    </header>
    <p>Wrapping up text</p>
  </section>
</article>
share|improve this answer
    
Thanks, I liked the example :) –  Agos Aug 6 '10 at 0:02
add comment

I think you'll find Dive Into HTML5, a book in progress, a great resource. Here's a relevant section on when and how to use new semantic elements. For your example, I think that you may be able to omit the <section> tag.

share|improve this answer
    
+1 Dive into HTML5 is great –  JasonBirch Aug 4 '10 at 2:16
    
+1 thanks for the article on the semantic elements. Easy readable. –  Saif Bechan Aug 17 '11 at 15:03
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.