Search code examples
htmlsemantics

HTML5 semantics & outlines

I just recently discovered the whole HTML outline thing and found this great online HTML5 outliner tool. Now I'm trying to accomplish a semantically proper simple HTML page with outline that should look like this:

  1. Page
    1. Nav
    2. Main
    3. Sub
      1. Aside
    4. Footer

And render a page like this: 

| --- NAV ----------------- |
|      content              |
| --- MAIN ---------------- |
|      content              |
| --- SUB ----------------- |
|      content      | aside |
| --- FOOTER -------------- |
|      content              |

The HTML looks as follows:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>

<body>
    <div class="page">

        <header class="page--header">
            <hgroup>
                <h1>page</h1>
                <h2>subtitle</h2>
            </hgroup>
            <nav>
                <h1>Nav</h1>
                <ul>
                    <li>link 1</li>
                    <li>link 2</li>
                    <li>link 3</li>
                    <li>link 4</li>
                    <li>link 5</li>
                </ul>
            </nav>

        </header><!-- .page-header -->

        <section class="page--main">
            <h1>Main</h1>                
        </section><!-- .page-main -->

        <section class="page--sub">
            <h1>Sub</h1>
            <aside>
                <h1>Aside</h1>
                <p>Advertisement block</p>
            </aside><!-- aside -->                
        </section><!-- .page-sub -->

        <footer>
            <h1>Footer</h1>                
        </footer><!-- footer -->

    </div><!-- .page -->
</body>
</html>

That makes the outline look like this:

  1. Page
    1. Nav
    2. Main
    3. Sub
      1. Aside
  2. Footer

How should I alter the HTML to keep it semantically correct while getting the outline mentioned above? How come footer is not outlined on same level as those top-level section elements (ie. main & sub) even when they all are siblings with same heading-level?

Confused, and any help, criticism or suggestions are welcome, thanks!

Solution
    1. Use ranked <h1> to <h6> headings instead of all <h1>s. source
    2. Wrap main content inside <main> element. Remember to set main { display: block } for cross browser compatibility.
    3. Put sidebar container (<aside>) inside <main> as <aside> is a complementary content of <main>.
    4. Remove the <h1> inside <footer> as <footer> is not a sectioning element so it doesn't need a heading.

    Brief example:

    <!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Title</title>
</head>
<body>

    <header role="banner">
        <hgroup>
            <h1>page</h1>
            <h2>subtitle</h2>
        </hgroup>
        <nav role="navigation">
            <h2>Nav</h2>
            <ul>
                <li>link 1</li>
                <li>link 2</li>
                <li>link 3</li>
                <li>link 4</li>
                <li>link 5</li>
            </ul>
        </nav>
    </header>

    <main role="main">

        <!-- main content goes here -->
        <section id="example">
            <h2>Example</h2>
            <p>Lorem ipsum</p>
        </section>
        <!-- main content goes here -->

        <aside role="complementary">
            <h2>Aside</h2>
            <article id="ad">
                <h3>Ad</h3>
                <p>Advertisement block</p>
            </article>
        </aside>    

    </main>

    <footer role="contentinfo">
        <p><small>&copy; <time>2013</time> Website Name</small></p>
    </footer>

</body>
</html>