Header (cabeçalho)

Elemento de texto que rotula e separa seções, mostrando pra pessoa o que vem a seguir.

Hard

O que é

Header é o texto que nomeia e divide as seções de uma tela, página ou documento. Ele funciona como uma âncora, porque diz o que vem depois e deixa o conteúdo mais fácil de escanear. Por isso costuma ser maior, mais pesado ou estilizado de um jeito diferente do corpo de texto, justamente pra marcar importância.

No trabalho de produto, o header é uma ferramenta de hierarquia. Ele quebra a informação em blocos digeríveis e reduz o esforço de leitura, já que a pessoa acha a seção certa sem precisar ler tudo. O espaçamento, o peso e o alinhamento são o que decide se o header parece equilibrado ou se acaba virando ruído, porque um header mal espaçado gruda no conteúdo e perde a função de separar.

A acessibilidade depende da tag semântica certa, porque o leitor de tela usa a estrutura de header pra navegar, com o h1 reservado ao título principal e depois h2 em diante. Quando essa ordem é lógica, todo mundo lê em blocos mais previsíveis.

Em uma frase

Vamos quebrar essa página em seções com headers claros pra ficar mais fácil de escanear.

A pergunta que ele responde

Como eu organizo uma tela cheia de conteúdo pra pessoa não se perder?

Quando usar

Ajuda ao estruturar qualquer tela ou documento que tenha mais de uma seção de conteúdo.

Como não usar

O cuidado é não escolher o tamanho do header só pela estética e acabar quebrando a ordem semântica, porque visualmente até passa, mas o leitor de tela perde o fio.

Na prática

Pense num artigo longo. Os headers funcionam ali como placas de estrada: a pessoa rola, bate o olho e acha o ponto que interessa sem precisar ler o texto inteiro.

Não confunda com

Vale separar header de heading. O header é o elemento estrutural da página, enquanto o heading é o título que apresenta o assunto da seção. No HTML eles se misturam bastante, mas no design compensa manter a distinção clara.

D

Em inglês

Headers

Pronúncia

rér

Também chamado de

header, cabeçalho, h1 a h6

Origem

n/a

Fonte

Saiba mais

Nielsen Norman Group, artigo sobre headings e leitura em F