HTML Content Sectioning Elements

Content sectioning

Content sectioning elements allow document content to be organized into logical pieces. It creates a broad outline of the page content.

<body>

Sectioning root

<header>

Introductory content

Header of the whole document, banner landmark, direct child of <body> element.

As page title

<body>
    <header>
        <h1>Codey Luwak</h1>
        <img src="..." alt="Luwak logo">
    </header>
</body>

Header of other sectioning elements like <article>, <aside>, <main>, <nav>, or <section> element. Intended to be used with heading element <h1>-<h6> even though not required.

As article title

<article>
    <header>
        <h2>...</h2>
        <p>...<p>
    </header>
    <p>...</p>
</article>

<nav>

Navigation block

Using <ul> listing presented as a sidebar, navigation bar, or dropdown menu is common, but links within <p> paragraph is a cool choice too.

Multiple <nav> elements possible.

For bottom links, <footer> element is more commonly used.

Nav structure

<nav>
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</nav>

CSS for forizontal nav bar

.html-nav ul {
    display: flex;
    list-style-type: none;
}

<main>

Dominant content of document's <body>

A document should have only 1 non-hidden <main> element.

Main structure

<body>
    <header>...</header>
    <main>
        <h1>...</h1>
        <p>...</p>
        <p>...</p>
    </main>
    <footer>...</footer>
</body>

<article>

Self contained composition

For examples: a forum post, a blog entry, a magazine/newspaper article, a product card, a user submitted comment, an interactive widget or gadget.

Article structure

<main>
    <h1>...</h1>
    <p>...</p>
    <article>
        <h2>...</h2>
        <p>...</p>
    </article>
    <article>
        <h2>...</h2>
        <p>...</p>
    </article>
</main>

<section>

Generic sectioning element

A generic wrapper for a heading <h1>-<h6> and its content.
It will appear in the document outline except if it doesn't have the heading element.
If heading element is wanted functionally but not visually, still use it but hide it with CSS styling.s
It should be used only when there's no more specific element to represent it.
Example use: search result, map display, user comments section.

Section structure

<section>
    <h2>Comments</h2>
    <article>...Comment 1...</article>
    <article>...Comment 2...</article>
</section>

Article used in place of div

<section>
    <h2>...</h2>
    <p>...</p>
</section>

Without heading

<section id="main">
    <article>...First blog post...</article>
    <article>...Second blog post...</article>
    <article>...Third blog post...</article>
</section>

Using h1-h6 titling but hide it from view with CSS

<section>
    <h2 class="hidden">Controls</h2>
    <button class="reply">Reply</button>
    <button class="reply-all">Reply to all</button>
    <button class="fwd">Forward</button>
    <button class="del">Delete</button>
</section>

<h1> <h2> <h3> <h4> <h5> <h6>

Section heading elements

Heading information can be used to automatically construct document's table of contents.

Avoid skipping heading levels.

Use only 1 <h1> per page/view. Multiple <h1> is allowed however not the best practise.

<address>

Contact address element

Typically placed inside <footer> element of the current section, if any.

HTML

Address example

<p>Contact:</p>
<address>
    <a href="mailto:name@example.com">name@example.com</a><br>
    <a href="tel:+15195555555">(519) 555-5555</a>
</address>

CSS

a[href^="mailto"]::before {
    content: "📧 ";
}

a[href^="tel"]::before {
    content: ""📞 ";
}

Result

Contact:

name@example.com
(519) 555-5555

<aside>

Indirectly related content

Usually displayed as a sidebar or call-out boxes.

In small screen when sidebar will cramp the already small space, <aside> is usually located before or after the main content.

HTML for aside above

<dl>
    <dt>...</dt>
    <aside>...</aside>
    <dd>...</dd>
</dl>

CSS for aside above

aside {
    width: 30%;
    float: right;
    color: steelblue;
    border-left: 1px solid steelblue;
    padding-left: 8px;
}

aside p {
    margin: 0;
}

<footer>

Closing element

Usually contains information about author, copyright, or links to the related document. It could be footer for the whole body or main content, or just for an article element.

Footer structure

<article>
    <h3>...</h3>
    <p>...</p>
    <p>...</p>
    <footer>...</footer>
</article>

Content sectioning

Resources