Docs executáveis de HTML: Títulos h1 a h6

Q: Quantas tags de título existem no HTML?

Seis: , , , , e . é o mais importante (o título da página) e o menos. Não existe ; uma tag assim é tratada como um elemento inline desconhecido.

Q: Quais são os tamanhos padrão dos títulos HTML?

Com o texto padrão de 16px, os navegadores exibem h1 com 32px (2em), h2 24px (1.5em), h3 18.72px (1.17em), h4 16px (1em), h5 13.28px (0.83em) e h6 10.72px (0.67em), todos em negrito.

Q: Posso ter mais de um h1 numa página?

O HTML permite, mas um único com o nome da página é a estrutura mais clara para quem usa leitor de tela e para os buscadores. Use para as seções principais abaixo dele.

Q: Como mudo o tamanho de um título?

Defina font-size no CSS, por exemplo h2 { font-size: 20px; } ou uma classe num título específico. Nunca escolha o nível de um título pelo tamanho padrão.

Títulos em HTML: h1 a h6, tamanhos, ordem e estilo

O HTML tem seis níveis de título, de <h1> a <h6>, que dão à página a sua estrutura. Veja os tamanhos padrão, como ordenar os títulos, quantas tags h1 usar, como mudar o tamanho com CSS e como os leitores de tela usam os títulos.

Esta página tem editores executáveis - edite, execute e veja a saída na hora.

Por Kevin Spektor, Co-founder & CTO

Publicado em Sep 24, 2026

As seis tags de título do HTML

O HTML tem seis níveis de título, de <h1> a <h6>. <h1> é o nível mais alto (o título da página) e <h6> o mais baixo. Os navegadores mostram cada nível menor que o anterior, todos em negrito, cada um na sua própria linha:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Headings</title>
</head>
<body>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
  <p>A paragraph, for comparison.</p>
</body>
</html>

Tag	Tamanho padrão	Com texto de 16px
`<h1>`	2em	32px
`<h2>`	1.5em	24px
`<h3>`	1.17em	18.72px
`<h4>`	1em	16px
`<h5>`	0.83em	13.28px
`<h6>`	0.67em	10.72px

<h5> e <h6> são menores que o texto normal por padrão, o que surpreende muita gente. O tamanho é só um padrão, e as próximas seções mostram por que o nível nunca deve ser escolhido pelo tamanho.

Os títulos são a estrutura da página

Títulos não são decoração. Juntos, eles formam a estrutura da página, como o sumário de um livro. Quem usa leitor de tela pula de título em título para achar o que procura, e os buscadores os leem para entender os assuntos da página.

A regra é simples: um <h1> para o título da página, <h2> para cada seção principal, <h3> para as subseções dentro de um <h2>, e assim por diante, sem pular níveis. Este exemplo monta um sumário a partir dos títulos, do mesmo jeito que as tecnologias assistivas os enxergam:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Outline</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #toc { background: #e5e7eb; padding: 8px 12px; border-radius: 6px; font-size: 14px; }
  </style>
</head>
<body>
  <div id="toc"></div>
  <h1>Pasta recipes</h1>
  <h2>Tomato sauce</h2>
  <h3>Ingredients</h3>
  <h3>Steps</h3>
  <h2>Pesto</h2>
  <h3>Ingredients</h3>
  <script>
    const lines = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')].map((h) => {
      const level = Number(h.tagName[1]);
      return '\u00a0'.repeat((level - 1) * 4) + h.tagName.toLowerCase() + ': ' + h.textContent;
    });
    document.getElementById('toc').innerHTML = lines.join('<br>');
  </script>
</body>
</html>

Troque o segundo <h3> por <h5> e o sumário mostra um buraco: quem navega pelos títulos ficaria se perguntando onde foi parar o h4.

Mudando o tamanho de um título

Escolha o nível pela posição na estrutura e depois defina a aparência com CSS. O título de uma barra lateral pode precisar ser um <h2> mas parecer pequeno; o título de um hero pode ser um <h1> bem grande:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Heading size</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 { font-size: 44px; margin-bottom: 4px; }
    h2 { font-size: 18px; color: #2563eb; text-transform: uppercase; letter-spacing: 0.05em; }
    .quiet { font-weight: 500; font-size: 16px; color: #4b5563; }
  </style>
</head>
<body>
  <h1>Big hero title</h1>
  <h2>Small section label</h2>
  <p>Still an h2 for screen readers, whatever it looks like.</p>
  <h2 class="quiet">A quiet h2 with a class</h2>
</body>
</html>

O mesmo vale ao contrário: não use uma tag de título só para deixar um texto grande ou em negrito. Para palavras em negrito dentro de uma frase use <strong>, e para texto grande que não é título use um <p> com uma classe. Veja negrito para as tags de texto.

Subtítulos e slogans

Um subtítulo logo abaixo de um título normalmente não é um título: ele não começa uma seção nova. Use um parágrafo e, se quiser, agrupe os dois com <hgroup>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Subtitle</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    hgroup h1 { margin-bottom: 0; }
    hgroup p { margin-top: 4px; color: #4b5563; font-size: 18px; }
  </style>
</head>
<body>
  <hgroup>
    <h1>Coffee Guide</h1>
    <p>Everything about brewing at home</p>
  </hgroup>
  <h2>Grinding</h2>
</body>
</html>

A estrutura continua limpa (um h1, depois as seções h2), e o slogan continua visualmente junto do título.

Link para um título

Dê um id a um título e qualquer link com #id no href pula direto para ele. É assim que funcionam sumários e botões de "copiar link da seção":

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Heading links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    section { min-height: 400px; border-top: 2px solid #e5e7eb; }
  </style>
</head>
<body>
  <nav><a href="#install">Install</a> | <a href="#usage">Usage</a></nav>
  <section><h2 id="install">Install</h2></section>
  <section><h2 id="usage">Usage</h2></section>
</body>
</html>

Erros comuns

Escolher o nível pelo tamanho. Escolha pela posição na estrutura e estilize com CSS.
Pular níveis. Ir de <h2> direto para <h4> atrapalha a navegação de quem usa leitor de tela.
Títulos para dar ênfase. Uma linha em negrito dentro de um parágrafo é <strong>, não <h4>.
Nenhum <h1>, ou um logo como único <h1>. O <h1> deve dar nome ao conteúdo da página, como o título do artigo ou do produto.
Títulos vazios. Um título só com um ícone, ou sem nada dentro, é anunciado em branco. Coloque texto de verdade nele.

Perguntas frequentes

Quantas tags de título existem no HTML?

Seis: <h1>, <h2>, <h3>, <h4>, <h5> e <h6>. <h1> é o mais importante (o título da página) e <h6> o menos. Não existe <h7>; uma tag assim é tratada como um elemento inline desconhecido.

Quais são os tamanhos padrão dos títulos HTML?

Com o texto padrão de 16px, os navegadores exibem h1 com 32px (2em), h2 24px (1.5em), h3 18.72px (1.17em), h4 16px (1em), h5 13.28px (0.83em) e h6 10.72px (0.67em), todos em negrito.

Posso ter mais de um h1 numa página?

O HTML permite, mas um único <h1> com o nome da página é a estrutura mais clara para quem usa leitor de tela e para os buscadores. Use <h2> para as seções principais abaixo dele.

Posso pular níveis de título, como de h2 para h4?

Evite. Quem usa leitor de tela navega por nível de título, e um salto de h2 para h4 sugere uma seção faltando. Escolha o nível pela posição na estrutura e mude o tamanho com CSS.

Como mudo o tamanho de um título?

Defina font-size no CSS, por exemplo h2 { font-size: 20px; } ou uma classe num título específico. Nunca escolha o nível de um título pelo tamanho padrão.

Conceitos relacionados