Tags HTML Obsoletas

Este capítulo explica quais tags HTML são obsoletas, por que caíram em desuso e o que usar no lugar delas. Se você herdou uma marcação antiga ou copiou um trecho de um tutorial desatualizado, este é o seu guia para as substituições modernas.

Por que as tags HTML são descontinuadas

A maioria das tags obsoletas compartilha uma causa raiz: elas misturam apresentação (como o conteúdo parece) com a estrutura (o que o conteúdo significa). O HTML antigo tinha tags como <font>, <center> e <big> que controlavam cores, alinhamento e tamanhos diretamente na marcação. Essa abordagem não escala: alterar a aparência de um site significava editar cada página manualmente.

O desenvolvimento web moderno segue o princípio da separação de responsabilidades: o HTML descreve a estrutura e o significado do conteúdo, enquanto o CSS cuida de todo o estilo. Isso torna as páginas mais fáceis de manter, mais leves para carregar e mais flexíveis para reformatar. Também melhora a acessibilidade — leitores de tela e outras ferramentas assistivas dependem de uma marcação semântica e significativa, não de truques visuais. Para uma visão mais completa da abordagem moderna orientada ao significado, veja Elementos Semânticos no HTML5 e a introdução ao HTML5.

Obsoleto vs. descontinuado

Esses dois termos são frequentemente usados de forma intercambiável, mas não são a mesma coisa:

• Obsoleto (deprecated) — a tag ainda é permitida e a maioria dos navegadores ainda a renderiza, mas seu uso é desencorajado. Pode ser removida no futuro.
• Descontinuado (obsolete) — a especificação HTML5 diz que a tag não deve ser usada. Os navegadores podem continuar renderizando-a apenas por compatibilidade com versões anteriores, mas você nunca deve escrever nova marcação com ela.

Antes e depois: substituindo uma tag obsoleta

O exemplo clássico é o <font>, que definia cor, tamanho e tipo de letra diretamente na marcação. Aqui está a forma antiga ao lado do seu equivalente em CSS.

Obsoleto, apresentação no HTML:

<font color="red" size="5" face="Arial">Important notice</font>

Moderno, estrutura mais CSS:

<p class="notice">Important notice</p>

.notice {
  color: red;
  font-size: 1.5rem;
  font-family: Arial, sans-serif;
}

A segunda versão separa o que o texto é (um parágrafo que é um aviso) de como ele parece. Você pode reformatar todos os .notice do site editando uma única regra CSS. Saiba mais nas páginas CSS font e text-align.

Notas de acessibilidade

Algumas tags obsoletas são desencorajadas especificamente por criar barreiras para os usuários:

• <blink> e <marquee> produzem texto piscando ou em movimento. O movimento e o piscar são perturbadores para muitos leitores, podem tornar o texto impossível de ler para pessoas com diferenças cognitivas ou de atenção, e flashes rápidos podem até desencadear convulsões em usuários com epilepsia fotossensível. Se você genuinamente precisar de movimento, use a animation do CSS — e respeite a configuração prefers-reduced-motion do usuário para que possa ser desativada.
• <acronym> foi substituído por <abbr> porque a distinção entre um "acrônimo" e uma "abreviação" era confusa e inconsistente. O único elemento <abbr> cobre ambos, e as tecnologias assistivas podem anunciar o texto expandido do atributo title aos usuários.

Lista de Tags HTML Obsoletas

Prática

Próximos passos

Agora que você sabe o que evitar, conheça as alternativas modernas orientadas ao significado em Elementos HTML e Elementos Semânticos no HTML5, e mova todo o estilo visual para o CSS.