Títulos e parágrafos

O HTML tem seis níveis de título, de h1 a h6, e quem usa leitor de tela costuma pular de título em título para se localizar na página.

Um sumário feito de títulos

Pense num livro de receitas. O livro tem um título, cada receita tem um nome, e cada receita tem partes menores, como Ingredientes e Modo de preparo. O HTML expressa esse mesmo sumário com seis elementos de título, de <h1> a <h6>. <h1> é o nível mais alto, em geral o título da página. <h2> marca as seções principais, <h3> as partes dentro de uma seção, e assim por diante. A maioria das páginas nunca precisa de mais de três ou quatro níveis.

<h1>Weekend Baking</h1>
<p>Three simple breads you can make at home.</p>

<h2>Soda bread</h2>
<h3>Ingredients</h3>
<p>Flour, baking soda, salt and buttermilk.</p>
<h3>Method</h3>
<p>Mix, shape into a round and bake for 40 minutes.</p>

<h2>Flatbread</h2>
<p>Ready in 20 minutes, no oven needed.</p>

Escolha o nível pela estrutura, não pelo tamanho

Os navegadores desenham <h1> grande e <h6> pequeno, e dá vontade de escolher um título pelo tamanho. Resista. O nível diz aos programas como a página está organizada. Leitores de tela podem listar todos os títulos de uma página e deixar o usuário pular direto para um deles, como num sumário. Os buscadores também usam os títulos para entender do que a página trata. Se você quer que um h2 pareça menor, mantenha-o como h2 e mude o tamanho com CSS.

Dois hábitos mantêm o sumário limpo. Primeiro, use um só <h1> por página, para o título principal; o MDN recomenda isso, e é o que a maioria dos usuários espera. Segundo, não pule níveis ao descer: depois de um h2 vem um h3, não um h5. Voltar a subir não tem problema, então um h3 pode ser seguido por um novo h2 quando começa a próxima seção.

Parágrafos

O texto corrido vai em elementos <p>, um por parágrafo. Como o HTML junta os espaços em branco, apertar Enter duas vezes no arquivo não cria um novo parágrafo na tela; só um novo <p> faz isso. Por padrão, os navegadores põem um espaço acima e abaixo de cada parágrafo, e o CSS pode mudar isso. Um parágrafo não pode conter outro parágrafo nem um título, então, se você esquecer um </p> de fechamento, o navegador o fecha por você assim que começa o próximo elemento de bloco.

Às vezes as próprias quebras de linha fazem parte do conteúdo, como num endereço ou num poema. Nesses casos, use <br> no fim de cada linha dentro de um parágrafo ou de um <address>. Não use uma pilha de elementos <br> para criar espaço vertical; isso é trabalho das margens do CSS. Para marcar uma mudança de assunto dentro de uma seção, como a troca de cena numa história, use <hr>, a quebra temática, que os navegadores desenham como uma linha horizontal.

Citações

Uma citação mais longa de outra fonte vai em <blockquote>, que os navegadores recuam. Coloque os parágrafos citados dentro dele; você pode informar o endereço da fonte no atributo cite. Uma citação curta dentro de uma frase usa <q>, e o navegador acrescenta as aspas por você. O elemento <cite> marca o título de uma obra, como um livro ou um filme.