HTML and CSS Reference
In-Depth Information
<section>
<section>
, on the other hand, isn't “a self-contained composition
in a document, page, application, or site and that is intended to
be independently distributable or reusable.” It's either a way of
sectioning a page into different subject areas, or sectioning an
article into, well, sections.
Consider this HTML 4 markup—the rules from Remy's previous
job in an off-Broadway production of Wizard of Oz:
<h1>Rules for Munchkins</h1>
<h2>Yellow Brick Road</h2>
<p>It is vital that Dorothy follows it—so no selling bricks
¬
as “souvenirs”</p>
NOTE
A
<section>
generally begins with a
heading that introduces it. An
exception to this might be a
<section>
that will have a
heading injected using
JavaScript. If you wouldn't use a
heading, or you want some
wrapping element purely for
styling purposes you probably
should be using a
<div>
.
<h2>Fan Club uniforms</h2>
<p>All Munchkins are obliged to wear their “I'm a friend of
¬
Dorothy!” t-shirt when representing the club</p>
<p><strong>Vital caveat about the information above:
¬
does not apply on the first Thursday of the month.
¬
</strong></p>
Does the “Vital caveat about the information above” refer to the
whole article, that is, everything under the introductory
<h1>
, or
does it refer only to the information under the preceding
<h2>
(“Fan Club uniforms”)? In HTML 4, that paragraph would fall
under the
<h2>
, and there's no easy way to semantically change
this. In HTML5, the
<section>
element makes its meaning unam-
biguous (which is what we really mean as web developers when
we use the word “semantic”):
<article>
<h1>Rules for Munchkins</h1>
<section>
<h2>Yellow Brick Road</h2>
<p>It is vital that Dorothy follows it—so no selling
¬
bricks as “souvenirs”</p>
</section>
<section>
<h2>Fan Club uniforms</h2>