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
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.
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>
divs 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
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>
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.
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>
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>