Currently the h1 "Top Level Page Title - Generic" would be used as heading for the body section (which represents the whole page). It’s not clear to me what this heading exactly describes (what is a "generic banner title"?).
Anyway, if it’s not the site title, you should add one. If your logo is the only element containing the site title If your logo is the only element containing the site title, use it as content for a h1 (don’t forget to provide an alt attribute!).
If this first heading is the site title, you might want to add it to the header.
It is recommended recommended to use sectioning content elements explicitly instead of relying on implicit sections by using several headings in a section. So use a section for the (currently implicit) section started by the second h1.
Currently the h1 "Top Level Page Title - Generic" would be used as heading for the body section (which represents the whole page). It’s not clear to me what this heading exactly describes (what is a "generic banner title"?).
Anyway, if it’s not the site title, you should add one. If your logo is the only element containing the site title, use it as content for a h1 (don’t forget to provide an alt attribute!).
If this first heading is the site title, you might want to add it to the header.
It is recommended to use sectioning content elements explicitly instead of relying on implicit sections by using several headings in a section. So use a section for the (currently implicit) section started by the second h1.
Currently the h1 "Top Level Page Title - Generic" would be used as heading for the body section (which represents the whole page). It’s not clear to me what this heading exactly describes (what is a "generic banner title"?).
Anyway, if it’s not the site title, you should add one. If your logo is the only element containing the site title, use it as content for a h1 (don’t forget to provide an alt attribute!).
If this first heading is the site title, you might want to add it to the header.
It is recommended to use sectioning content elements explicitly instead of relying on implicit sections by using several headings in a section. So use a section for the (currently implicit) section started by the second h1.
From the three things you heard about header use, none is correct. And the use section is not necessarily optional. Depending on the kind of pagination, it can be appropriate to use nav for it.
It’s helpful to read the relevant part of the HTML5 spec for details, but here’s my short and rough summary:
- A HTML5 documents consists of sections (there are sectioning root elements like
bodyand the four sectioning content elementssection/article/nav/aside). - Each section longs for exactly one heading.
- If you have more than one heading inside of a section, you are creating implicit sections. Better make them explicit!
- If you don’t provide any heading, this section will get an unlabeled entry in the document outline.
- Each section can have
header,footerandaddresselements (yes, even multiple). These three elements are used to mark everything inside of a section that is not considered part of the section’s main content.
So for a typical page that is part of a website, the first question would be: Which heading to use for the body sectioning root? (Remember, each section would love to get an own heading.) Typically it only makes sense to use the site title here. It especially doesn’t make sense to use the title of this page’s main content, because things like the site-wide navigation and sidebars would be in scope of this heading, which would not be correct.
The main content of that page should also get an own sectioning content element (typically article, if not appropriate, section). If you have several main content sections on the same level, use several section elements. The main element can be used to group all of these main content sections.
Now that your body has a heading and sectioning content elements for the main content, use header and footer to mark anything on the document that is not part of the main flow. Typically these are things that are the same for all pages of the site, like the site-wide navigation, a footer etc.
For content that is related to other content on the page, but not really part of the main content, there is the aside element. If the content is related to the whole page, place it as descendant of body and no other section. If it is related to a certain section, place it as descendant of that section.
Taking your code and removing anything not related to sections and the document outline gives this:
<body>
<nav><!-- utilityNav --></nav>
<header>
<nav><!-- mainNav --></nav>
</header>
<h1>Top Level Page Title - Generic</h1>
<aside><!-- sidebar --></aside>
<h1>Category Title</h1>
<main>
<article>
<h1>Post Name</h1>
</article>
<article>
<h1>Post Name</h1>
</article>
<article>
<h1>Post Name</h1>
</article>
</main>
<footer></footer>
</body>
Currently the h1 "Top Level Page Title - Generic" would be used as heading for the body section (which represents the whole page). It’s not clear to me what this heading exactly describes (what is a "generic banner title"?).
Anyway, if it’s not the site title, you should add one. If your logo is the only element containing the site title, use it as content for a h1 (don’t forget to provide an alt attribute!).
If this first heading is the site title, you might want to add it to the header.
I guess the first nav could also be part of the header.
The footerLinks could probably also be part of the following footer.
It is recommended to use sectioning content elements explicitly instead of relying on implicit sections by using several headings in a section. So use a section for the (currently implicit) section started by the second h1.
This gives:
<body>
<header>
<nav><!-- utilityNav --></nav>
<nav><!-- mainNav --></nav>
<h1>Top Level Page Title - Generic</h1> <!-- assuming that this is the site title -->
</header>
<aside><!-- sidebar --></aside>
<main>
<section>
<h2>Category Title</h2>
<article>
<h1>Post Name</h1>
</article>
<article>
<h1>Post Name</h1>
</article>
<article>
<h1>Post Name</h1>
</article>
</section>
</main>
<footer></footer>
</body>