HTML moderno: estrutura, semântica e acessibilidade
Atributos fornecem informações ou configuram o comportamento de um elemento. Eles aparecem na tag de abertura e devem ser usados apenas onde a especificação permite. Um atributo útil complementa a semântica; ele não corrige a escolha de um elemento inadequado.
Nome e valor
Em um link, href define o destino. Em uma imagem, src aponta para o arquivo e alt fornece a alternativa textual. Coloque valores entre aspas para manter um padrão seguro e legível.
<a href="/sobre/" hreflang="pt-BR">Conheça o projeto</a>n<img src="equipe.webp" alt="Equipe reunida em uma mesa">Atributos booleanos
A presença de um atributo booleano representa verdadeiro; sua ausência representa falso. Por isso, disabled="false" ainda desabilita um controle. Use apenas disabled quando a condição for verdadeira.
<button type="button" disabled>Processando…</button>n<input type="checkbox" checked>Prefira padrões modernos
Evite atributos de apresentação antigos como align, bgcolor e border; apresentação pertence ao CSS. Evite title como única fonte de instrução, pois ele não funciona de modo consistente em toque ou teclado. Use texto visível e rótulos associados.
Checklist de qualidade
- O atributo é válido para esse elemento?
- O valor precisa ser entendido por uma pessoa ou tecnologia assistiva?
- Existe uma alternativa semântica ou de CSS mais apropriada?
Pratique agora
Crie um link, uma imagem e um botão. Para cada atributo usado, explique qual problema ele resolve e remova os que não têm função.
