Etiquetas HTML en desuso
Las etiquetas en desuso están permitidas pero no recomendadas. Conoce la lista de etiquetas HTML obsoletas y sus alternativas modernas.
Este capítulo explica qué etiquetas HTML están en desuso, por qué dejaron de recomendarse y qué usar en su lugar. Si has heredado marcado antiguo o copiado un fragmento de un tutorial desactualizado, esta es tu guía hacia el reemplazo moderno.
Por qué las etiquetas HTML se vuelven obsoletas
La mayoría de las etiquetas en desuso comparten una causa raíz: mezclan la presentación (cómo se ve el contenido) con la estructura (qué significa el contenido). El HTML primitivo tenía etiquetas como <font>, <center> y <big> que controlaban colores, alineación y tamaños directamente en el marcado. Este enfoque no escala: cambiar el aspecto de un sitio implicaba editar cada página manualmente.
El desarrollo web moderno sigue el principio de separación de responsabilidades: HTML describe la estructura y el significado del contenido, mientras que CSS se encarga de todo el estilo. Esto hace que las páginas sean más fáciles de mantener, más ligeras de descargar y más flexibles para reestilizar. También mejora la accesibilidad: los lectores de pantalla y otras herramientas de asistencia dependen de un marcado semántico significativo, no de trucos visuales. Para una visión más completa del enfoque moderno basado en el significado, consulta Elementos semánticos en HTML5 y la introducción a HTML5.
En desuso vs. obsoleto
Estos dos términos se usan indistintamente con frecuencia, pero no son lo mismo:
- En desuso — la etiqueta todavía está permitida y la mayoría de los navegadores aún la renderizan, pero su uso está desaconsejado. Podría eliminarse en el futuro.
- Obsoleto — la especificación HTML5 establece que la etiqueta no debe usarse. Los navegadores pueden seguir renderizándola solo por compatibilidad con versiones anteriores, pero nunca deberías escribir nuevo marcado con ella.
No dependas de que una etiqueta en desuso "funcione simplemente." Los navegadores pueden dejar de darle soporte en cualquier momento, y estas etiquetas suelen comportarse de manera inconsistente entre navegadores. Siempre prefiere el reemplazo moderno.
Antes y después: reemplazar una etiqueta en desuso
El ejemplo clásico es <font>, que definía el color, el tamaño y el tipo de letra directamente en el marcado. A continuación se muestra la forma antigua junto a su equivalente en CSS.
Obsoleto, presentación en HTML:
<font color="red" size="5" face="Arial">Important notice</font>Moderno, estructura más CSS:
<p class="notice">Important notice</p>.notice {
color: red;
font-size: 1.5rem;
font-family: Arial, sans-serif;
}La segunda versión separa qué es el texto (un párrafo que es un aviso) de cómo se ve. Puedes reestilizar todos los .notice del sitio editando una sola regla CSS. Aprende más en las páginas de CSS font y text-align.
Notas de accesibilidad
Algunas etiquetas en desuso se desaconsejan específicamente porque crean barreras para los usuarios:
<blink>y<marquee>producen texto parpadeante o en movimiento. El movimiento y el parpadeo son distractores para muchos lectores, pueden hacer que el texto sea imposible de leer para personas con diferencias cognitivas o de atención, y el parpadeo rápido puede incluso provocar convulsiones en usuarios con epilepsia fotosensible. Si realmente necesitas movimiento, usa animation de CSS — y respeta la configuraciónprefers-reduced-motiondel usuario para que pueda desactivarlo.<acronym>fue reemplazado por<abbr>porque la distinción entre un "acrónimo" y una "abreviatura" era confusa e inconsistente. El elemento único<abbr>cubre ambos casos, y las tecnologías de asistencia pueden anunciar el texto expandido del atributotitlea los usuarios.
Lista de etiquetas HTML en desuso
| ETIQUETA | Descripción | ALTERNATIVA |
|---|---|---|
<acronym> | Indica al navegador que los caracteres que contiene son un acrónimo o abreviatura. | <abbr> |
<applet> | Define un applet de Java incrustado. | <object> |
<basefont> | Especifica el tamaño y color de fuente predeterminados del texto. | Estilos CSS |
<big> | Aumenta el tamaño de fuente en una unidad convencional. | Estilos CSS |
<blink> | Crea un texto encerrado que parpadea lentamente. | animation |
<center> | Alinea el contenido al centro. | text-align |
<dir> | Define una lista de títulos de directorio. | <ul> |
<font> | Define las características de la fuente. | Estilos CSS |
<frame> | Define una ventana específica, un marco, donde se puede cargar otra página web. | <iframe> |
<frameset> | Define la estructura de un marco. | <iframe> |
<isindex> | Muestra cadenas de búsqueda en el documento actual. | <form> |
<noframes> | Contiene un texto alternativo que se muestra en navegadores que no admiten marcos. | Completamente obsoleto junto con <frameset>/<frame>; no tiene reemplazo directo. |
<marquee> | Crea un texto o imagen desplazable. | animation |
<spacer> | Inserta espacio en blanco (horizontal o vertical) para el diseño. | Estilos CSS (margin/padding) |
<menu> | Define una lista de comandos. | <ul> |
<plaintext> | Indica al navegador que su contenido debe mostrarse como texto sin formato. | <pre> |
<strike> | Define texto tachado. | <del> |
<tt> | Define texto que se mostrará en fuente monoespaciada. | <code> |
Práctica
Próximos pasos
Ahora que sabes qué evitar, aprende las alternativas modernas basadas en el significado en Elementos HTML y Elementos semánticos en HTML5, y luego traslada todo el estilo visual a CSS.