Texto, imagens, links e listas

O HTML fornece seis níveis de títulos. Use-os para criar um esboço do documento, não para alterar o tamanho do texto. <h1> é o título da página (uma vez por página), <h2> é usado para seções principais, <h3> para subseções e assim por diante.

O elemento <p> envolve um parágrafo de texto. O navegador adiciona automaticamente espaçamento acima e abaixo. Use <br> com moderação — apenas para quebras de linha significativas, como em um endereço ou poema, e não para separar parágrafos.

Use elementos em linha para dar significado ao texto: <strong> para texto importante (negrito), <em> para ênfase (itálico), <code> para trechos de código, <mark> para texto destacado e <small> para letras miúdas.

O elemento <img> incorpora uma imagem. O atributo src fornece a URL, e alt fornece texto alternativo para leitores de tela e para quando a imagem não carregar. Inclua sempre um valor significativo para alt.

O texto alternativo deve transmitir o conteúdo e a finalidade da imagem. Imagens decorativas (espaçadores, ícones puramente decorativos) usam alt="" (string vazia) para que os leitores de tela as ignorem. Nunca escreva alt="imagem de" — apenas descreva o que a imagem mostra.

O elemento <a> (âncora) cria hiperlinks. O atributo href define a URL de destino. O texto do link deve descrever o destino — nunca escreva "clique aqui".

Ao abrir links em uma nova aba com target="_blank", adicione sempre rel="noopener noreferrer". Sem isso, a página aberta pode acessar o objeto window da página que a abriu — uma vulnerabilidade de segurança chamada sequestro reverso de aba.

Use <ul> (lista não ordenada) quando a ordem dos itens não importar — recursos, ingredientes ou links de navegação. Cada item é um <li>. O navegador renderiza marcadores por padrão, mas quase sempre você os estilizará com CSS.

Use <ol> (lista ordenada) quando a ordem for importante — etapas de um tutorial, classificações ou instruções. Os itens são numerados automaticamente. Use os atributos start e reversed para controlar a numeração.

<dl> (lista de descrições) agrupa termos e suas definições ou descrições. Use-a para glossários, metadados (autor/data) e pares chave-valor. <dt> é o termo, e <dd> é a descrição.

As listas podem ser aninhadas para representar hierarquias. Coloque o <ul> ou <ol> filho dentro do elemento <li> pai. Não aninhe listas apenas para criar recuo — use CSS.

Qual atributo fornece uma descrição textual de uma imagem para os leitores de tela?

Use elementos de título para a estrutura do documento, p para parágrafos, img com texto alt significativo para imagens, a com texto descritivo para navegação e ul/ol/dl para conteúdo em listas. A semântica torna o HTML acessível e legível por máquinas.