Heading
O título dá nome a uma página ou a uma parte dela, e o conjunto dos títulos é o mapa da página.
Nesta página
Playground
Agendamentos
Nível
Fundo
<h1>Agendamentos</h1>Quando usar
- Um título 1 por página, dizendo o que a página é.
- Títulos 2, 3 e 4 para dividir em partes, em ordem, sem pular nível.
Quando não usar
- Para deixar um texto grande ou em negrito: use Text com
data-size="lead", ou<strong>. O nível é estrutura, não tamanho. - Como sobretítulo em caixa alta em cima de outro título: não existe no Feitio.
Exemplos
Agendamentos
Esta semana
Terça-feira
Manhã
Os quatro níveis
Na Alegreya Sans. O tamanho vem do nível; não existe "título 2 com cara de título 1".
Mostrar código
<h1>Agendamentos</h1>
<h2>Esta semana</h2>
<h3>Terça-feira</h3>
<h4>Manhã</h4>Bons e maus padrões
Faça assim
Lembretes
Três lembretes ativos.Título curto, que diz o que vem embaixo.
Não faça
Organização
Lembretes
O sobretítulo em caixa alta é enfeite, e uma das marcas de página genérica.
Faça assim
Backup do computador
O título inteiro na mesma cor e peso.
Não faça
Backup do computador
Uma palavra em laranja ou itálico chama atenção para o lugar errado.
Como escrever
- Substantivo ou frase curta, sem ponto final: "Agendamentos", "Esta semana".
- Só a primeira letra maiúscula. Nada de caixa alta.
Acessibilidade
- Leitores de tela navegam pelos títulos: a ordem precisa fazer sentido sem ver a tela.
- Nunca pule nível (de 2 para 4): quem navega pelos títulos acha que perdeu uma parte.
Atributos
| Atributo | Valores | Para quê |
|---|---|---|
<h1> a <h4> | o nível | Sem classe: o CSS base já estiliza, e o tamanho vem do nível. |