Description
Before the attempt to unify <section> and friends with <h[1-6]> was abandoned in favour of allowing the latter only to define the section heading hierarchy, it was possible and legitimate to do something like this:
<!doctype html>
<title>My spiffy weblog</title>
<header>
<h1>My spiffy weblog</h1>
</header>
<article>
<h1>Apples are red, or are they green?</h1>
<p>Lorem ipsum blah blah blah, this is the text of an article discussing the colour of apples
<h2>Case study: Red Delicious</h2>
<p>This is a section of the article
<h2>Case study: Granny Smith</h2>
<p>This is another section
<h2>Many are both green and red</h2>
<p>This section is the thrilling, equivocating conclusion
</article>(There are some extraneous elements here, but they better reflect the reality of what a fully-tagged website would look like.)
In other words, <h1> could be used to tag both the name of the website and the (hypothetically subordinate) title of an article within that website.
Now there are some issues with this which make finding a replacement tricky:
- The article title is no longer considered subordinate to the website name
- There is a de facto convention in HTML that
<h2>is used for ‘first-level’ subsections after the title of an article. I have many articles in my content database which follow this convention - There is an apparent best practice since the outline algorithm was canned that you shouldn’t use more than one
<h1>element on a single page
The obvious way to resolve this is to use <h1> for the name of the website, <h2> for the title of the article, and downgrade all those sections headings within the article to <h3>.
<!doctype html>
<title>My spiffy weblog</title>
<header>
<h1>My spiffy weblog</h1>
</header>
<article>
<h2>Apples are red, or are they green?</h2>
<p>Lorem ipsum blah blah blah, this is the text of an article discussing the colour of apples
<h3>Case study: Red Delicious</h3>
<p>This is a section of the article
<h3>Case study: Granny Smith</h3>
<p>This is another section
<h3>Many are both green and red</h3>
<p>This section is the thrilling, equivocating conclusion
</article>This probably means updating a lot of legacy content to downgrade <h2>s to <h3>s, <h3>s to <h4>s, etc.
Another alternative might be to simply dump the <h1> tag for the name of the website, allowing <header> alone to mark this feature, albeit that there might be other things like a <nav> inside it too:
<!doctype html>
<title>My spiffy weblog</title>
<header>
<div class="what-tag-is-right-for-this-now-then">My spiffy weblog</div>
</header>
<article>
<h1>Apples are red, or are they green?</h1>
<p>Lorem ipsum blah blah blah, this is the text of an article discussing the colour of apples
<h2>Case study: Red Delicious</h2>
<p>This is a section of the article
<h2>Case study: Granny Smith</h2>
<p>This is another section
<h2>Many are both green and red</h2>
<p>This section is the thrilling, equivocating conclusion
</article>But, as I indicate with the class name, it’s not clear to me any more what element I should use to mark up the site name now. I thought about at least setting role=heading aria-level=0 to maintain some kind of marked-up superior heading status for it, but the aria-level attribute has to be a positive integer.
What’s now the proper way to do this?