Como eu uso os Headings do HTML.

#HTML

Quando tive meus primeiros contatos com o HTML, na época ainda era o HTML 4, algumas das primeiras tags que aprendi foram <html>, <head>, <body>, que constituem as estruturas principais do HTML. Logo após, dentro do <head>, aprendi sobre <title>, meta-tags e a inclusão de arquivos externos, como JS e CSS. No <body>, a primeira coisa que vi foram os headings (cabeçalhos em português), que vão de <h1> até <h6>.

Uma dúvida que sempre tive foi o motivo de haver seis headings. Sempre achei isso excessivo. Na minha concepção, seriam necessários apenas três, seguindo a lógica mostrada abaixo:

<h1>: o principal, o título da página, o título de uma notícia, o título de um artigo ou texto.
<h2>: um subtítulo de um artigo, notícia ou texto.
<h3>: título de seções, listas, tabelas.

Eu não conseguia imaginar onde as tags <h4>, <h5> e <h6> seriam úteis. Por muito tempo, tive essa dificuldade em compreender tantos headings assim.

Com o tempo, fui compreendendo melhor o HTML, e com a chegada do HTML 5 e suas semânticas, entendi melhor a questão dos cabeçalhos. Mas ainda me sentia incomodado e outras dúvidas surgiram:

Em que situação usa-se do H1 até o H6 sem pular nenhum dos headings?
Por que não vejo em nenhum site o uso do H6?
Por que alguns desenvolvedores usam os headings de acordo com seus estilos de font-size e não pela sua importância?
Por que, ao inspecionar alguns sites, vejo alguns headings com o font-size e até o font-weight alterado?

Hoje em dia, tenho uma teoria que sigo e gostaria de compartilhar. Então, vamos analisar os "hagas".

Segundo a W3C (4.4.6 The h1, h2, h3, h4, h5, and h6 elements), os headings têm uma classificação de importância e nada mais. Onde o H1 é o mais importante e o H6 é o menos importante. O W3School e o MDN Web Docs também afirmam o mesmo. Beleza, se vamos do mais importante ao menos, devo ter apenas seis seções em minha página de notícias? É necessário que toda página tenha seis seções? Enfim, responderei a isso mais tarde. Vamos ver como os SEOs veem os headings.

Os motores de busca, como o Google, utilizam as tags de cabeçalho (h1 até h6) para entender a estrutura e hierarquia do conteúdo de uma página web. Essas tags desempenham um papel importante no contexto de SEO (Search Engine Optimization) porque ajudam a indicar a relevância e organização do conteúdo. Resumindo, também usam a classificação do mais importante ao menos. Porém, alguns limites e conceitos devem ser usados. Um grande exemplo é que só deve haver apenas um único <h1>, não existe texto, artigo, notícia, conteúdo com mais de um título. Então, um desenvolvedor que enche a página de <h1> e até de <h2> poderia ser considerado spam e acabaria perdendo a relevância nos sites de busca, ou pior, poderia entrar para a blacklist deles.

Minha preocupação ao querer entender bem os headings poderia ser considerada boba. Afinal, são tags que se aprendem no início do HTML; é algo fácil, uma criança de 6 anos já sabe sobre isso. Porém, é um ponto a ser considerado por todos do Front-end, pois um erro poderá causar sérios danos ao site. Desse modo, vou apresentar a minha maneira de lidar com os "hagas".

Observando a imagem acima, podemos ver o uso das tags H1 até H6 em uma única página seguindo os seguintes princípios:

H1: É o título principal da página e não pode ser repetido na mesma página.
H2: É um complemento do H1, uma pequena descrição do título principal e também não deve ser repetido.
H3: É o título de cada seção da sua página. Pode ser repetido de acordo com a quantidade de seções que tem a sua página.
H4: Reservo para títulos de listas ordenadas, não ordenadas e tabelas.
H5: Reservo para subtítulos de listas ordenadas, não ordenadas e imagens. Com a atenção de que, por mais que seja um título de uma imagem, eu coloco o H5 abaixo da imagem.
H6: Reservo apenas para o título do <footer>, ou seja, o rodapé.

Dessa maneira, consigo ter coerência da classificação de relevância e um ótimo SEO. É claro que isso não é uma regra a ser seguida ou regulamentada pela W3C, mas é a que eu sigo e compartilho com vocês.

Um grande abraço a todos. Peço que compartilhem, deem like e comentem. Terei o prazer de responder qualquer dúvida.

Ass.: Anjus Rafael