HTML5 outline questions - sections and differentiating header/footer

Question

I am looking at HTML5 tags properly for the first time really and have come up with this page structure (for a blog site):

<header>
    <nav>
        <ul>
            <li>list 1</li>
            <li>list 2</li>
        </ul>
    </nav>
</header>
<main>
    <h1>Main page heading</h1>
    <article><h1>Post 1</h1></article>
    <article><h1>Post 2</h1></article>
    <div id=“sidebar”>
        <aside><h1>Aside heading</h1></aside>
    </div>
</main>
<footer>
    <aside><h1>Footer widget heading</h1></aside>
    <aside><h1>Footer widget heading</h1></aside>
</footer>

When I run this through an HTML outliner tool https://gsnedders.html5.org/outliner/ I get this:

1. Main page heading
    1. Untitled Section
    2. Post 1
    3. Post 2
    4. Aside heading
    5. Footer widget heading
    6. Footer widget heading

Not exactly how I would have thought it should outline.

Q1. No idea why I am getting the 'Untitled Section' there. Playing around suggests this actually relates to the <nav>. Should I be worried about 'Untitled Section's? The nav doesn't really need a heading as far as I'm concerned...

Q2. Obviously my page structure isn't really having the desired effect. I wanted to differentiate the <header> and <footer> from the <main> page content. I understand these tags are not sectioning elements as such, but if not, then what are they for, especially in the case of <header> and <footer>? My understanding was that <main> should be used where you might have used <div id="main"> or <div id="wrapper"> in the past and should denote the main area of the page, which is exactly what it's doing.

The reason I haven't used <section> tags is because I understand that they shouldn't be used as styling wrappers, and are more for 'chapters of a page'. This page doesn't have any chapters (the only self-contained things are already differentiated with <article> and <aside>) so I didn't see why I should use <section>.

I also tried using <h1> tags in <header> and <footer> which seems to sort out my problem.

<header>
    <h1>Site title</h1>
    <nav>
        <ul>
            <li>list 1</li>
            <li>list 2</li>
        </ul>
    </nav>
</header>
<main>
    <h1>Main page heading</h1>
    <article><h1>Post 1</h1></article>
    <article><h1>Post 2</h1></article>
    <div id=“sidebar”>
        <aside><h1>Aside heading</h1></aside>
    </div>
</main>
<footer>
    <h1>Footer heading</h1>
    <aside><h1>Footer widget heading</h1></aside>
    <aside><h1>Footer widget heading</h1></aside>
</footer>

Outline:

1.  Site title
    1.  Untitled Section
2.  Main page heading
    1.  Post 1
    2.  Post 2
    3.  Aside heading
3.  Footer heading
    1.  Footer widget heading
    2.  Footer widget heading

But this doesn't really feel like a great solution as while the header maybe should have a title, I don't want to give my footer a title... any alternative suggestions would be appreciated. I just want to keep things as simple as possible while still using the tags for their correct purpose.

I appreciate anyone's time for reading through this whole question. If I'm just getting too obsessive about this outlining let me know.

Is this outlining tool you're using universally considered to be an authority? [This article on html5 outlines](http://html5doctor.com/outlines/) mentions that there is no record of when the tool was last updated. Have you checked your page in other outliners? — i alarmed alien, Oct 18 '14 at 09:28
Good point, I'm not sure. Do you have any links to other outliners? Have tried Googling but not finding anything definitive... — Sarah, Oct 18 '14 at 09:46
I think that outliners are a bit of a waste of time--there's a good post on that [here](http://www.paciellogroup.com/blog/2013/10/html5-document-outline/). However, if you are going to use them, I'd try the [h5o](https://github.com/h5o) outliner, available as JS or a chrome extension. — i alarmed alien, Oct 18 '14 at 10:01
Ok, thanks... so do I take it that in your opinion, my structure in the first example is essentially sound? — Sarah, Oct 18 '14 at 10:19
There's a fair amount of personal coding style that goes into writing html, which means there's no "One True Structure." With your document structure, I would probably make the article H1 elements into H2s, and the aside and footer widget titles into H2, H3, or H4s -- give the titles their appropriate "semantic" weight in the context of the page. — i alarmed alien, Oct 18 '14 at 10:31
Thanks for replying. Yeah I was thinking that h2s/h3s would be more appropriate for those in current HTML terms, but then read this article http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824 about using multiple h1 tags with the new HTML5 tags. I've also read that browsers aren't really taking this up yet though, so these new methods are all theoretical really and may not actually be worth using yet... see also http://blog.adrianroselli.com/2013/12/the-truth-about-truth-about-multiple-h1.html — Sarah, Oct 18 '14 at 14:18
It's not just that the outline algorithm isn't implemented in browsers *yet*, it's that there are statements from those at the browser makers making it clear that they've no intention of ever implementing it. As such, the outline algorithm is effectively dead in the water. — Alohci, Oct 19 '14 at 11:17

score 0 · Answer 1 · edited May 23 '17 at 12:28

A typical webpage (that is part of a website) should have the site title (instead of the main content title) as heading of the body sectioning root. Why? Because site-wide things like the navigation should not be in scope of the page’s main content heading.

If the site title is not desired, the page should at least get an untitled outline entry, which can be achieved by using sectioning content elements explicitly wherever appropriate.

See my answer with examples (another one).

Q1. No idea why I am getting the 'Untitled Section' there. Playing around suggests this actually relates to the <nav>. Should I be worried about 'Untitled Section's? The nav doesn't really need a heading as far as I'm concerned...

Every section (sectioning content elements like section and nav, and sectioning root elements like body and blockquote) "longs" for a heading. If you don’t provide one, outliner might display something like "untitled section". It’s a section, just without a heading. And no, you don’t have to worry: it’s not necessarily useful/appropriate for every section to have a heading (navigation can be one example).

Q2. […] I understand these tags are not sectioning elements as such, but if not, then what are they for, especially in the case of and ?

Every section can have header and footer (and address) elements. Their job? To markup the content that is not considered to be the main content of that section. So the header as child of body is the header of the whole document, the header as child of article is the header of this article only etc. (see examples).

It’s not required to give the footer a heading (or use a section for it). Just by using footer you made clear that the content is the footer of (in your case) the document. A section/heading can be appropriate if the footer is complex, i.e., contains much content. As you have two aside elements in your footer, you could consider adding a parent (untitled) section that could represent your footer or serve as a grouping parent for the two aside elements (but if this makes sense depends your actual content).

HTML5 outline questions - sections and differentiating header/footer

1 Answers1