8

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?

2

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>
4

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.

  • +1 thanks for the article on the semantic elements. Easy readable. – Saif Bechan Aug 17 '11 at 15:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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