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.

Answer 1

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