2

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!

Improve this question

1 Answer 1

Reset to default
2

The headline tags were designed to create an outline or table of contents of the page. When using Web Accessibility software the software and you select headlines the software will read the first headline ... the h1 tag ... then wait for a user response. At the user response to read or open the headlines under h1, it will read the h2 tags. If the user selects the h2 tag it will read the h3 tags under that h2 tag ... otherwise, the h3 tags are not read.

So the headline tags are navigation tools. People can choose to listen to the part of the page they are interested in or can return to that part of the page, ... Just like most people use a table of contents to find a page in a book ... instead of reading the whole page from the beginning. Orphan tags are skipped.

From WIA https://www.w3.org/WAI/test-evaluate/preliminary/#headings

enter image description here

Reading the headlines on your "should page" reads as

<h1>Headline</h1>
   <h2>Headline 2</h2>
       <h3>Teaser Headline</h3>
   <h2>Headline</h2>
          <h4>Headline</h4>
          <h4>Headline 1</h4>
  • So when I select h1 it reads "headline 2" and "headline"
  • If I select headlines for "headline 2" it reads "teaser headline"
  • If I select headlines for "headline" it reads "headline," "headline1"

I'm not certain without context but I believe both your h4 should be h2? and I believe your

<h3>COMPANY NAME</h3>

is an orphan that never gets read when navigating using headlines.

Search Engines use CSS

If you are using the headline tags as size / weight tags that is not best practice. You can simply use a class name instead. For SEO just consider them a div and the importance of the material in them expands by how much real estate they use on the page. I'm fairly certain search engines are only considering them as div because every time they allow content producers to tell the search engine what is important it works out badly. Correction: Google My Business has worked out well for verifiable businesses.

<style>
/* note class selector is more specific and in use for 
best practice of headline tags in HTML
but for the page layout classes can be used */ 

h1, .h1 {}
h2, .h2 {}
h3, .h3 {}
h4, .h4 {}
</style>
...
<h1 class="h3">Company Name</h1>
   <h2 class="h1">Headline</h2>
      <h3 class="h3">Teaser Headline</h3>
   <h2 class="h2">Headline</h2> <!-- t3 section headline -->
   <h2 class="h4">Headline</h2> <!-- footer headline-->

or maybe? I'm not sure what the content is going to be?

<div class="h3">Company Name</div>
<h1 class="h1">Page title main headline</h1>
   <h2 class="h3">teaser or introduction headline</h2>
   <h2 class="h2">Headline</h2>
   <h2 class="h4">A Footer headline</h2>

The size of the font, placement, and How much whitespace around it, gives the bot the details of how important it is or how much weight it should put on that text.

Not all sites are marking up HTML correctly.

It is a common practice to use the h1 tag for the company name, it reads fine. It is a common practice to overuse headline tags where they don't need to be used. But if one wants to look forward.

Many Government agencies and some businesses are required to use them correctly.

https://www.ada.gov/resources/web-guidance/

This guidance describes how state and local governments and businesses open to the public can make sure that their websites are accessible to people with disabilities as required by the Americans with Disabilities Act (ADA).

So when I say AIRA has Google as a friend. I'm also saying Google does not want to do anything that would make them not a friend. Google's interest as well as those who influence Google is the semantic tags are used correctly.

That said, I've seen not "search" penalty for incorrect usage.

Although one should note ...

Title III Sample Cases

  • Rite Aid Corporation: The Department reached an agreement with Rite Aid Corporation to address accessibility barriers in Rite Aid’s COVID-19 Vaccine Registration Portal.
  • Teachers Test Prep, Inc.: The Department reached an agreement with Teachers Test Prep, Inc., regarding complaints that the test prep company’s online video courses did not provide captions and were inaccessible to people who are deaf.
  • HRB Digital and HRB Tax Group (H&R Block): The Department reached an agreement with H&R Block to address claims that the company failed to code its website so that individuals with disabilities could use assistive technology such as screen reader software, refreshable Braille displays, keyboard navigation, and captioning.
  • Peapod: The Department reached an agreement with Peapod to address claims that its online grocery delivery services were not accessible to some individuals with disabilities.
Improve this answer
19
  • Thanks for there very niche and big answert. for the <main>-part I agree with you 100%! i have a question like the footer, can i use more HTML5 Headline outlines ? i think we dont need a perfect headline structur. i think with the new part <footer> we can take a <h3 or a <h4
    – Sebastian
    Feb 2 at 21:09
  • 1
    I've not seen or noticed headlines being used in the footer but it is not incorrect. If you want a headline in the footer for [page outline or AIRA] navigation then use it. Otherwise make it a div. FYI a div can be made a headline with <div role="heading" aria-level="1">;This is a main page heading</div>; ... developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/…
    – Wayne
    Feb 2 at 21:20
  • 1
    Using a <h3> after a <h2> makes it a child of the <h2>... to be a peer of the <h2> it is an <h2>
    – Wayne
    Feb 2 at 21:23
  • 1
    Note on <footer> the normal usage is the footer remains the same for all pages on the site. Google notices this and discounts its content for on page SEO, so if that last Headline is important for on-page technical SEO it may be best if it is not in the footer ... but then again if it is on every page, Google is still going to discount it or reassign it as site wide theme not specific to this page.
    – Wayne
    Feb 2 at 21:44
  • <h1 class="h3">...</h1> is not proper syntax. The HTML/CSS relationship for text tags are handled the same way the <body> tag is handled. CSS: h1 { color:black; } h2 { color:green; } HTML: <h1>Company Name</h1>
    – elbrant
    Feb 3 at 2:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.