Correct use of <section>?
HTML5 has started to see real use in the wild, but unfortunately there’s already some misunderstandings concerning some parts of the draft – most notably the <section> element. People seem to have missed the purpose of this element – it is not just a “semantic <div>”.
An example of what you can often see is this:
<!doctype html>
<section>
<article>
<h1>...</h1>
<p>Lorem ipsum ...
</article>
<article>
...
</article>
</section>
Clearly, this is not the intended purpose of the <section> element. It was intended to make outlining of documents (creating TOCs) easier by grouping content to headings, instead of having several different heading elements. The correct usage of the <section> element, therefore, looks like this:
<!doctype html>
<article>
<h1>Title</h1>
<p>Lorem Ipsum...
<section>
<h1>Subtitle</h1>
<p>Lorem ipsum...
<section>
<h1>Sub-subtitle</h1>
<p>Lorem ipsum...
</section>
</section>
<section>
<h1>Subtitle</h1>
<p>Lorem ipsum...
</section>
</article>
Leave a Reply