html5 – Is it worth using the W3C validator?

Question:

I ask this, because it seems that he accuses things that, I think, he was not supposed to accuse.

For example:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Titulo do Site</title>
        <meta name="description" content="Teste Teste Teste" />
        <!--A meta abaixo, diz ao navegador, que terá que inicar na resolução 100%-->
        <meta name="viewport" content="width=width-device, initial-scale=1.0" />
    </head>
    <body>
        <!--CABEÇALHO DO NOSSO SITE, COMO MENUS< LOGO, ETC-->
        <header>
            <h1>Teste do Documento</h1>
            <ul>
                <li><a href="#home" title="Teste Teste Teste">Home</a></li>
                <li><a href="#servicos" title="Teste Teste Teste">Serviços</a></li>
                <li><a href="#portifolio" title="Teste Teste Teste">Portfólio</a></li>
                <li><a href="#sobre" title="Teste Teste Teste">Sobre mim</a></li>
                <li><a href="#contato" title="Teste Teste Teste">Contato</a></li>
            </ul>
        </header>

        <!--CONTEUDO DE NOSSO SITE-->
        <main>
            <article>
                <header>
                    <h1>Teste Teste Teste</h1>
                    <p>Teste Teste Teste Teste Teste Teste Teste Teste!</p>
                </header>
            </article>
        </main>

        <!--RODAPE DE NOSSO SITE-->
        <footer>
            <h1>Teste</h1>
            <nav>
                <h1>Teste</h1>
                <p>Teste Teste Teste</p>
            </nav>
        </footer>
    </body>
</html>

It's an optimized document, but in the validator it gives an H1 warning:

Warning: 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).

Now, as HTML5 creates nodes, there is no problem using other H1 within the same page, remembering that it has to be inside a header, article, etc…

Answer:

Let's go with what the HTML5 specification says about <h#> tags:

These elements have a rank given by the number in their name. The h1 element is said to have the highest rank, the h6 element has the lowest rank, and two elements with the same name have equal rank.

Still:

h1–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection.

In other words: <h#> tags are made to mark a section (regardless of whether they are inside a session tag or not. Note:

<section>
    <h1>Titulo</h1>
    <p>Texto</p>
    <h2>Título</h2>
    <p>Texto</p>
    <h2>Título</h2>
    <p>Texto</p>
</section>

It's correct as well as

<section>
    <h1>Titulo</h1>
    <p>Texto</p>
    <article>
        <h2>Título</h2>
        <p>Texto</p>
    </article>
    <article>
        <h2>Título</h2>
        <p>Texto</p>
    </article>
</section>

On the contrary, it would be wrong to use

<section>
    <h1>Titulo</h1>
    <p>Texto</p>
    <h1>Título</h1>
    <p>Texto</p>
    <h1>Título</h1>
    <p>Texto</p>
</section>

the same way as

<section>
    <h1>Titulo</h1>
    <p>Texto</p>
    <article>
        <h1>Título</h1>
        <p>Texto</p>
    </article>
    <article>
        <h1>Título</h1>
        <p>Texto</p>
    </article>
</section>

This is because the numbering of the h tags serves to rank a context block (or a sectioning content, as described by the W3C). A sectioning content may OR may not be delimited by a tag, but it defines the difference between a sectioning root and its children.

Following this logic, I cannot have two higher level <h1> tags in the same document, for the same reason I cannot have two sectioning root relative to the document.

That is, in the marking

<section id="sec1">
    <section id="sec2">
        <section id="sec3">
        </section>
    </section>
</section>

#sec1 will always be the sectioning root of the document. #sec2 is sectioning root compared to #sec3. Still, it will never be a sectioning root with respect to the document; therefore, it can never receive a higher-level h tag ( <h1> ), which must belong to the sectioning root of the document.

To delve deeper into the question:

The h1, h2, h3, h4, h5, and h6 elements

Headings and sections

sectioning content

Outline

EDIT

I decided to complement the answer to better fit the question. As pointed out, it is important for both interpreters and indexers that the site follow the W3C rules in order to provide the most seamless experience possible. Ranking can only be "a grade" if you or your project choose to ignore these parameters. There is no error in this and the site will run and work. But, in certain scenarios (such as ranking indexers) not following the markup rules can result in punishments (such as lower indexes and, consequently, worse positions in search lists).

Post Views: 0
Scroll to Top