Títulos HTML
Um título é um cabeçalho de página que ajuda os motores de busca a indexar sua estrutura. Aprenda sobre níveis, tamanho e importância dos títulos HTML.
Os títulos dividem uma página em seções rotuladas e hierarquizadas — da mesma forma que títulos de capítulos e seções organizam um livro. Em HTML você tem seis níveis, do <h1> (o mais importante) ao <h6> (o menos importante). Escolher o nível correto faz mais do que tornar o texto grande: ele define o esboço do documento em que navegadores, tecnologias assistivas e motores de busca se baseiam para compreender como seu conteúdo está organizado.
Esta página aborda as seis tags de título, como seus níveis se encaixam em uma hierarquia, por que tamanho e nível são conceitos separados, como usuários de leitores de tela navegam pelos títulos, e como o elemento <header> difere do <h1>–<h6>.
Tags de Título
Existem 6 níveis de títulos em HTML: <h1>, <h2>, <h3>, <h4>, <h5> e <h6>.
As tags <h1> - <h6> são usadas para marcar títulos de acordo com sua importância. A tag <h1> representa o título mais importante da página web e a <h6> representa o menos importante e menor.
Exemplo das tags de título HTML <h1> - <h6>:
Como usar as tags HTML <h1>-<h6>?
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>Para a referência completa de cada nível, consulte as tags HTML <h1>–<h6>.
Hierarquia de Títulos e o Esboço do Documento
Os níveis de título não são apenas tamanhos — eles descrevem aninhamento. Um <h2> é lido como subseção do <h1> mais próximo acima dele, um <h3> é subseção desse <h2>, e assim por diante. Juntos, esses níveis aninhados formam o esboço do documento: uma árvore que indica quais partes da página pertencem a quais outras.
Pense como um sumário:
<h1>Baking Bread</h1> <!-- the page topic -->
<h2>Ingredients</h2> <!-- a section of "Baking Bread" -->
<h2>Method</h2> <!-- another section -->
<h3>Kneading</h3> <!-- a step inside "Method" -->
<h3>Proving</h3> <!-- another step inside "Method" -->
<h2>Troubleshooting</h2>O recuo acima é apenas para ilustração — os títulos são irmãos na marcação, e os números de nível são o que criam a hierarquia. Use um <h1> para o tema principal da página, depois <h2> para suas seções de nível superior, <h3> para subseções dessas, e nunca recorra a um nível inferior apenas para deixar o texto menor.
Acessibilidade: Não Pule Níveis de Título
Usuários de leitores de tela raramente leem uma página de cima para baixo. Em vez disso, eles abrem uma lista de todos os títulos e saltam diretamente para a seção desejada, como quem percorre um sumário. Isso só funciona quando os níveis descendem em ordem — <h1>, depois <h2>, depois <h3> — sem lacunas.
Pular um nível (por exemplo, um <h1> seguido imediatamente por um <h3>) quebra o esboço: a tecnologia assistiva reporta um nível ausente e os usuários não conseguem saber se saltaram para uma subseção ou simplesmente se perderam.
Ruim — um nível é pulado:
<h1>Our Menu</h1>
<h3>Starters</h3> <!-- jumps from h1 to h3, skipping h2 -->
<h3>Mains</h3>Bom — os níveis descem um passo de cada vez:
<h1>Our Menu</h1>
<h2>Starters</h2>
<h2>Mains</h2>
<h3>Vegetarian Mains</h3>Se um título parecer grande ou pequeno demais em seu nível correto, altere a aparência com CSS — não o nível.
Importância dos Títulos
- Os títulos HTML destacam tópicos importantes e a estrutura do documento, melhorando assim o engajamento do usuário.
- Use apenas uma tag
<h1>em qualquer página web. A tag deve descrever o assunto da sua página e também conter uma palavra-chave para melhorar o posicionamento no Google. - Os motores de busca usam os títulos para indexar a estrutura e o conteúdo da página web.
Tamanho dos Títulos
Os navegadores atribuem a cada nível de título um tamanho padrão, com <h1> sendo o maior e <h6> o menor. Você pode substituir qualquer um desses valores com a propriedade CSS font-size.
O ponto principal: alterar o tamanho visual de um título não altera seu nível semântico. Um <h2> estilizado para parecer enorme ainda é um <h2> no esboço, e um <h1> pequeno ainda é o título de nível superior da página. Portanto, escolha a tag pelo lugar que ela ocupa na hierarquia e ajuste o tamanho conforme o design exige — nunca escolha uma tag por causa do tamanho que ela renderiza.
Exemplo de alteração do tamanho do título com a propriedade font-size:
Como estilizar uma tag HTML <h1> usando a propriedade CSS font-size
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
font-size: 50px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>Notas Importantes
- Não use tags de título para aumentar o tamanho do texto ou deixá-lo em negrito. Em vez disso, use propriedades CSS como font-weight e font-size. Lembre-se de que os motores de busca usam os títulos para estruturar o conteúdo.
- Não pule níveis de título. Use o
<h1>como título principal da página web, seguido pelos títulos<h2>, depois os menos importantes<h3>, e assim por diante. - Evite usar
<h1>mais de uma vez em uma página.
Elementos Relacionados
Algumas tags são comumente vistas ao lado dos títulos, mas pertencem a seus próprios tópicos:
- A tag
<hr>desenha uma quebra temática entre seções de conteúdo. - O elemento
<head>contém metadados da página (título, conjunto de caracteres, estilos, scripts) e não faz parte do conteúdo visível.
Título vs. Cabeçalho: <h1>–<h6> vs. <header>
Esses dois são fáceis de confundir porque os nomes se parecem, mas exercem funções diferentes:
- Um título (
<h1>–<h6>) é um rótulo único que identifica uma seção de conteúdo e lhe atribui um nível no esboço do documento. - Um cabeçalho (
<header>) é um contêiner para conteúdo introdutório no topo de uma página ou seção — geralmente um logotipo, título do site e navegação. Frequentemente contém um título, mas não é um título em si.
Compare-os lado a lado:
<!-- A heading: one ranked title -->
<h1>Weekly Newsletter</h1>
<!-- A header: a block of introductory content that wraps a heading -->
<header>
<img src="logo.png" alt="Acme logo" />
<h1>Weekly Newsletter</h1>
<nav>
<a href="/archive">Archive</a>
<a href="/subscribe">Subscribe</a>
</nav>
</header>Em resumo: coloque um título dentro de um cabeçalho quando precisar de um bloco introdutório com título; use um título simples quando precisar apenas rotular uma seção. Saiba mais no capítulo sobre a tag HTML <header>.