Consider using the h1 element as a top-level heading only (all h1 elements are treated as top-level headings by many screen readers and other tools)

HTML-CSS
1

I have used h1 tag only one time and got this warning. Is on every h1 tags or can hide it? or fix or something? Is with W3C Validator.

Thanks.

2

Could you show the code that you ran through the validator? That seems like a fairly harmless warning so I wouldn’t worry about it.

3

It depends on the structure and the elements used. You might have a section element with an article element inside it. Because both elements are sectioning content the h1 would be for the section (top level) and then you might use an h2 for the article.

4.3.9. Headings and sections

The h1–h6 elements are headings.

The first element of heading content in an element of sectioning content represents the heading for that explicit section. Subsequent headings of equal or higher rank start new implied subsections that are part of the previous section’s parent section. Subsequent headings of lower rank start new implied subsections that are part of the previous one. In both cases, the element represents the heading of the implied section.

This will give a warning (well two):

<section class="about">
  <article>
    <h1>Article heading</h1>
    <p>Lorem</p>
  </article>
</section>

This will not give a warning (div instead of article):

<section class="about">
  <div>
    <h1>Article heading</h1>
    <p>Lorem</p>
  </div>
</section>

This will not give a warning (section h1, article h2):

<section class="about">
  <h1>About heading</h1>
  <article>
    <h2>Article heading</h2>
	<p>Lorem</p>
  </article>
</section>

As long as you don’t have any errors it’s a valid document. HTML semantics can get a little pedantic at times.

2 Likes