Curso de HTML / Títulos e parágrafos: h1 a h6, p e br

Use h1 a h6 para os títulos HTML e p para os parágrafos. Os títulos descrevem a hierarquia de uma página, enquanto os parágrafos agrupam frases relacionadas. Use br somente quando precisar de uma quebra de linha no mesmo parágrafo, e não para começar um novo parágrafo.

Use h1–h6 para mostrar os níveis de títulos

O HTML fornece seis níveis de títulos. Uma página normalmente usa h1 para seu título principal, h2 para as seções principais e h3 para os tópicos dentro dessas seções. O nível de um título descreve onde seu conteúdo está situado no documento; não é uma escolha de tamanho de fonte. Compare as regiões da página com os títulos em Divida uma página com elementos semânticos.

<h1>Guia de acessibilidade</h1>



<h2>Estrutura HTML</h2>

<p>Visão geral da estrutura de um documento HTML.</p>



<h3>Níveis de títulos</h3>

<p>Como organizar os títulos.</p>



<h3>Parágrafos</h3>

<p>Como separar os parágrafos.</p>



<h2>Apresentação CSS</h2>

<p>Como o CSS modifica a aparência dos títulos e parágrafos.</p>

Os dois títulos h3 acima são tópicos dentro da seção h2 intitulada «Estrutura HTML». O próximo h2 inicia outra seção principal. Ao introduzir uma subseção, evite pular um nível—por exemplo, passar diretamente de h2 para h4.

Títulos claros ajudam os leitores a percorrer a página e os usuários de leitores de tela a navegar entre as seções. O guia W3C WAI sobre a estrutura de títulos explica por que os níveis de títulos devem refletir a organização do conteúdo.

Se o WordPress já exibe o título do post como h1 da página, você não precisa de outro h1 para o mesmo título no corpo do artigo. Em vez disso, comece as seções principais com h2.

Veja os títulos e parágrafos em um navegador

Salve o seguinte exemplo completo como index.html e abra-o em um navegador. Ele apresenta os seis níveis de títulos um após o outro para comparação; uma página real precisa apenas dos níveis exigidos pelo seu conteúdo.

<!doctype html>

<html lang="pt-BR">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Títulos e parágrafos HTML</title>

  </head>

  <body>

    <h1>Título 1</h1>

    <h2>Título 2</h2>

    <h3>Título 3</h3>

    <h4>Título 4</h4>

    <h5>Título 5</h5>

    <h6>Título 6</h6>

    <p>Este é o primeiro parágrafo.</p>

    <p>Este é o segundo parágrafo.</p>

  </body>

</html>

Os navegadores aplicam tamanhos e espaçamentos padrão diferentes aos níveis de título, mas a aparência exata depende do navegador e do CSS da página. Se um título precisa parecer maior ou menor, modifique seu CSS em vez de usar o nível de título errado.

Separe os parágrafos com p

O elemento p indica um parágrafo. Envolva grupos distintos de frases relacionadas em elementos p separados para que sua relação permaneça clara.

<p>O HTML cria a estrutura de uma página web.</p>

<p>O CSS controla sua aparência.</p>

Este código cria dois parágrafos. Adicionar uma linha em branco em um editor de texto sozinho não cria um novo parágrafo HTML. Um p pode conter texto comum e conteúdo em linha, como links, mas não deve conter cabeçalhos, listas ou tabelas.

Para adicionar espaço entre os parágrafos, use uma propriedade CSS como margin em vez de inserir elementos vazios p ou elementos br repetidos.

Use br para uma quebra de linha dentro de um mesmo parágrafo.

O elemento br inicia uma nova linha sem criar um novo parágrafo. Ele é útil quando a posição de uma quebra de linha é importante, como em um endereço ou um poema. Se o assunto mudar, comece outro p em seu lugar.

Neste exemplo, o segundo p é um novo parágrafo. O br modifica apenas a linha dentro desse parágrafo.

<!doctype html>

<html lang="pt-BR">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Parágrafos HTML e quebras de linha</title>

  </head>

  <body>

    <p>Este é o primeiro parágrafo.</p>

    <p>Esta é a primeira linha do segundo parágrafo.<br>Esta é a segunda linha do segundo parágrafo.</p>

  </body>

</html>

Mantenha o nível semântico do título no HTML e defina seu tamanho visual usando as fontes, tamanhos e alturas de linha em CSS.

Exercício: corrigir uma hierarquia de títulos

Quando uma seção principal obtém sua primeira subseção, não passe de h2 para h4. O problema neste fragmento é sua hierarquia, não o tamanho da fonte.

<!-- Um nível de título pulado -->
<h2>Informações de entrega</h2>
<h4>Áreas de entrega</h4>

<!-- Uma hierarquia coerente -->
<h2>Informações de entrega</h2>
<h3>Áreas de entrega</h3>
<h3>Prazos de entrega</h3>

Compare os fragmentos separadamente dentro de um body de um documento; não mantenha ambos como conteúdo real. Leia apenas os títulos e verifique se o tópico principal e seus subtemas permanecem claros. Use CSS para ajustar a aparência deles.

Verifique seus títulos e parágrafos

• Escolha h1–h6 de acordo com a estrutura do conteúdo, não pelo tamanho da fonte padrão.
• Dê a cada título um nome descritivo e evite pular um nível ao passar para uma subseção.
• Use um novo p para um novo parágrafo; use br apenas para uma quebra de linha significativa dentro de um parágrafo.
• Controle os tamanhos de fonte e espaçamentos com CSS, não com elementos vazios ou com um nível de título diferente.

Para verificar tags mal aninhadas, envie seu HTML para o serviço de validação de marcação do W3C. Teste a ordem de leitura e o uso do teclado com a pequena página em Fundamentos de acessibilidade: títulos, links, imagens e teclado.