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>
Search WWH ::




Custom Search