I am looking for a good and safe example/solution for headlines in a <section>
or <footer>
or <header>
markup for 2023.
I read here that by using <main>
<section>
etc you can also mix the headings.
https://html.spec.whatwg.org/multipage/sections.html#outlines
https://medium.com/alistapart/writing-html-with-accessibility-in-mind-a62026493412
(These articles are already quite old.)
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
(The HTML Section Heading elements)
https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi
(HeadingsMap - chrome plugin)
My HTML5 structure should look like this:
<body>
<header>
<section>
<h3>COMPANY NAME</h3>
<nav>META NAVIGATION</nav>
</section>
<nav>MAINMENU</nav>
</header>
<main>
<section>SLIDER / HEADIMAGE / TEXT/IMAGE</section>
<h1>Headline</h1>
<p>Text / Image / UL CONTENT</p>
(Text / Image / UL)
<h2>Headline 2</h2>
<p>Text</p>
<section>
<h3>Teaser Headline</h3>
<p>Teaser-Text</p>
<img>
</section>
<section T3-FRAME>
<h2>Headline</h2>
<p>Text</p>
<img>
</section>
<section T3-FRAME>
<h4>Headline</h4>
<img>
<p>Text</p>
</section>
</main>
<footer>
FOOTER CONTENT
<section>
<h4>Headline 1</h4>
<img>
<p>Text</p>
</section>
....
....
</footer>
</body>
Since I don't want the weighting of the web page to be so high in the footer or even in the header, there should be no H2 there, but only h3 or h4. <- that I my basic understanding.
Unfortunately I do not have any good references for this.
But the "perfect" HTML5 structure is that I should keep the order of the headings.
Like:
<h1>
<h2>
<h2>
<h3>
<h3>
<h2>
<h2>
The code is also okay for me in the content / main area.
But not for the Footer, Header, Aside...
Some tools can measure the order. Do I then have to do the following for the footer for example?
Here a Footer markup example:
....
</main>
<footer>
<h2 class="hidden">Footer</h2>
<h3 class="hidden">Footer</h3>
<section>
<h4>Headline 1</h4>
<img>
<p>Text</p>
</section>
....
....
</footer>
</body>
And now i can use a <h4 in the Footer... ?
Another markup example:
About a header slider there is no H1 or h2 over there, but all individual slides should get only one H3.
Like this:
<body>
<header>
<section>
<h3>COMPANY NAME</h3>
<nav>META NAVIGATION</nav>
</section>
<nav>MAINMENU</nav>
</header>
<main>
<section>
<div SLIDER>
<div ITEM1>
<h3>
<p>
<img> or BG-IMG
</div>
<div ITEM2>
<h3>
<p>
<img> or BG-IMG
</div>
...
</div>
</section>
....
i hope you can help me :) Thanks all!