Sectioning
While headings do a grand, perfectly valid, job in defining the start of a new section or sub-section in a document, there are a number of elements that can be exploited to establish a cleaner, clearer semantic structure.
Whereas div elements can be used to contain sections, used primarily as scaffolding on which to hang CSS, they don’t hold a great deal of meaning. Sectioning involves a handful of tags that can be used to define specific parts of a page, such as articles, headers, footers, and navigation.
Articles and Sections
An article
element can be used to mark up a standalone section of content. This could be used just once, if you think of a blog post as an article, for example, or a number of times, if you imagine replicating a traditional newspaper page with numerous articles.
A section
element represents a more general section and could be used to split up an article, or to represent chapters, for example.
<article>
<section id="intro">
<p>[An introduction]</p>
</section>
<section id="main_content">
<p>[Content]</p>
</section>
<section id="related">
<ul>
<li><a href="that.html">That related article</a></li>
<li><a href="this.html">This related article</a></li>
</ul>
</section>
</article>
While div
s could be used to make these separations (or even if you didn’t need these separations for styling), this provides a much richer, more meaningful document.
Headers and Footers
header
and footer
provide further specialized, self-descriptive, sections:
<body>
<article>
<header>
<h1>Alternatively…</h1>
<p>[An introduction]</p>
</header>
<section id="main_content">
<p>[Content]</p>
</section>
<footer>
<p>[End notes]</p>
</footer>
</article>
<footer>
<p>[Copyright bumf]</p>
</footer>
</body>
The footer
is the footer of the section in which it is contained. So, in the above example, the first footer
is the footer of the article and the second footer
is the footer of the page.
Asides
An aside
can be used to represent content that is related the content surrounding it. Think of pull-quotes or snippets of related information in an article:
<section id="main_content">
<h1>Tixall</h1>
<p>[All about Tixall]</p>
<aside>
<h2>Tixall Obelisk</h2>
<p>[A short note about Tixall Obelisk]</p>
</aside>
<p>[Maybe a bit more about Tixall]</p>
</section>
Navigation
Finally, there’s nav
, used to mark up a group of navigation links:
<nav id="main_nav">
<ul>
<li><a href="/tutorials/">Tutorials</a></li>
<li><a href="/techniques/">Techniques</a></li>
<li><a href="/examples/">Examples</a></li>
<li><a href="/references/">References</a></li>
</ul>
</nav>