html intermediate tutorial : Sectioning

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 ofmeaning. Sectioning involves a handful of tags that can be used to define specific parts of a page, such as articles, headers, footers, andnavigation.

Articles and Sections

An article element can be used to mark up astandalone 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 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

header and footer provide further specialized, self-descriptive, sections:


<body>
<article>
    <header>
        <h1>Alternatively&hellip;</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 firstfooter 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>

While we’re at this structure-love, if you want to include figures, there happens to be two tags for doing just that:


<figure>
    <img src="obelisk.jpg">
    <figcaption>Tixall Obelisk</figcaption>
</figure>

Note that the img element doesn’t need an altattribute IF the figcaption (that’s “figure caption”, in case you need it spelling out) does that job.

Navigation

Finally, there’s nav, used to mark up a group ofnavigation links:


<nav id="main_nav">
    <ul>
        <li><a href="/tutorials/">Tutorials</a></li>
        <li><a href="/reference/">Reference</a></li>
        <li><a href="/articles/">Articles</a></li>
        <li><a href="/about/">About us</a></li>
    </ul>
</nav>

If you want to style these new HTML 5 elements (and you probably do, right? It’s much nicer than using <div id="content">..., etc) you will experience a problem in older browsers, most notably Internet Explorer versions 8 and earlier, that don’t understand these tags.

HTML5Shiv can come to your rescue, however; a small piece of JavaScript, slotted in to your headelement, that teaches the remedial browsers and holds their hands so that you can use new HTML 5 tags and style them up to your heart’s content with CSS.

It’s your call if you want to use a JavaScript fudge or stick with the safe old (and, again, perfectly valid) but semantically poorer headings and divs approach. This site, along with many others, chooses the former. Because HTML 5’s loveliness just about outweighs a hack’s ugliness.

Earn money

Search This Blog