Verificador de estrutura de headings: estrutura de H1 a H6 a partir do HTML | We.Inc
Cole HTML e veja a estrutura de H1 a H6 como uma árvore, com níveis pulados, H1 ausente ou repetido e headings vazios sinalizados. Roda no seu navegador; nada é enviado.
Verificador de estrutura de headings
Cole o HTML de uma página e este verificador desenha a estrutura dos headings como uma árvore recuada, de h1 até h6, incluindo elementos com role="heading". Ele sinaliza níveis pulados, como um h2 seguido de um h4, um h1 ausente ou repetido e headings vazios. A análise acontece no seu navegador, então o código nunca sai do seu dispositivo.
O que o verificador sinaliza
Verificação
Exemplo
Por que importa
Nível pulado
h2 seguido direto de h4
Quem usa leitor de tela perde a noção de onde está
Sem h1
A página começa no h2
A página não tem um título principal
Mais de um h1
Logo e título ambos como h1
Um único h1 deve nomear a página
Heading vazio
<h3></h3> ou só um ícone
É anunciado sem ter nada a dizer
Primeiro heading não é h1
h3 antes do h1
A estrutura começa pelo meio
Os headings são a forma como quem usa leitor de tela percorre uma página, e eles mostram aos mecanismos de busca o formato do seu conteúdo. Cole abaixo o HTML de uma página ou de um componente, tirado do código-fonte ou do seu editor, e a estrutura aparece com cada problema marcado na linha onde ele acontece.
Copie o HTML da sua página, por exemplo pelo exibir código-fonte, e cole na caixa. Ou carregue o exemplo para ver as verificações.
O verificador lê cada h1 a h6 e cada elemento com role="heading" na ordem do documento.
Leia a árvore: o recuo segue o nível, e os avisos ficam ao lado do heading que os causou.
Corrija a marcação, cole de novo e copie a estrutura limpa como texto simples se quiser usá-la em um briefing.
Use os níveis de heading para a estrutura e o CSS para o tamanho. Se um h2 parece grande demais em um card, mude o estilo dele em vez de trocá-lo por um h4.
Voltar vários níveis para cima não tem problema: um h4 pode ser seguido de um h2 quando começa uma nova seção.
Um logo raramente é o h1 certo. Dê o h1 ao título que nomeia esta página.
Em single-page apps, cole o HTML renderizado, copiado do inspetor de elementos do navegador, porque o código-fonte pode mostrar só uma casca vazia.
Texto escondido com CSS também conta aqui, já que o verificador lê a marcação e não aplica a sua folha de estilos.
Perguntas frequentes
É errado pular níveis de heading?
O tutorial de headings do W3C diz que pular níveis pode confundir e deve ser evitado sempre que possível, por exemplo um h2 seguido direto de um h4. Fechar uma seção e voltar para cima, como de h4 para h2, é normal.
Uma página pode ter mais de um h1?
O HTML permite, mas o MDN recomenda um único h1 que descreva o conteúdo da página. A antiga ideia de que cada seção poderia recomeçar no h1 dependia de um algoritmo de estrutura do documento que os navegadores não usam, então esta ferramenta avisa quando há um segundo h1.
Por que não posso simplesmente digitar uma URL?
Esta é uma página estática que roda no seu navegador, e os navegadores impedem que um site leia o HTML de outro. Colar o código mantém a ferramenta honesta e privada: nada é enviado para lugar nenhum.
Ele entende role="heading"?
Sim. Um elemento com role="heading" é lido no seu aria-level. Se o aria-level estiver ausente, os navegadores usam o nível 2, então o verificador o trata como h2 e sinaliza o atributo que falta.
Os headings afetam o SEO?
Os headings descrevem a estrutura do seu conteúdo para todos os leitores, incluindo os mecanismos de busca. Não prometemos nada sobre rankings; uma estrutura clara vale a pena antes de tudo para as pessoas.
Como ler a estrutura
Cada linha é um heading, recuado de acordo com o nível. Uma estrutura saudável se lê como um sumário: um título, algumas seções h2 e subseções h3 dentro delas quando necessário.
Os avisos apontam para o heading onde o salto aconteceu, não para o anterior. Corrija de cima para baixo, porque um nível errado logo no início pode deixar tudo o que vem abaixo com aparência estranha.
Causas comuns
A maioria dos níveis pulados vem de escolher um heading pelo tamanho padrão. Templates e construtores de páginas costumam fazer isso em rodapés e cards. Outros vêm de componentes reaproveitados em páginas com estrutura diferente, e é por isso que vale a pena tornar configurável o nível de heading de um componente.
Headings vazios geralmente envolvem um ícone ou uma imagem sem texto alternativo. Dê texto alternativo à imagem, adicione texto visível ou deixe de usar um heading para ela.
Níveis de heading em resumo
Como os seis níveis costumam ser usados em uma página web
Nível
Uso típico
O título da página, uma única vez
As seções principais da página
Subseções dentro de um h2
Detalhes dentro de um h3, como itens de uma lista de recursos
Raro; documentação extensa e textos jurídicos
Como corrigir uma estrutura quebrada
Antes: níveis escolhidos pelo tamanho
Os títulos dos cards pulam de h2 para h4 porque o h4 parecia ter o tamanho certo.
Depois: o nível certo, reestilizado com CSS
Os cards usam h3, o nível logo abaixo, e uma classe os mantém pequenos.
Verifique seus headings
Cole o HTML abaixo. Ele é lido no seu navegador e nunca é enviado.
HTML para verificar
Carregar exemplo
Limpar
Estrutura
{n} headings, {w} avisos
Nenhum heading encontrado. Cole o HTML de uma página para ver a estrutura.