Atributos HTML obsoletos
Lista de atributos HTML obsoletos, las etiquetas donde se usaban y la propiedad CSS moderna que los reemplaza, con ejemplos de migración.
Un atributo HTML obsoleto (deprecated) es aquel que la especificación ha marcado como anticuado y desaconseja usar. La mayoría de los atributos de esta página eran de presentación — controlaban cómo se veía el contenido (color, tamaño, alineación, espaciado). Cuando HTML5 reemplazó a HTML 4.01, la especificación trasladó deliberadamente esta responsabilidad de estilo fuera de HTML y hacia CSS, de modo que el marcado describe la estructura y las hojas de estilo describen la apariencia.
Por qué se eliminaron estos atributos
En la era de HTML4 era habitual escribir <td bgcolor="#ff0000"> o <font size="5"> directamente en el marcado. HTML5 los eliminó porque mezclar presentación en HTML tiene costes reales:
- Separación de responsabilidades. Los estilos viven en CSS, de modo que una sola regla puede re-estilizar todas las celdas en lugar de repetir un atributo en cada etiqueta.
- Mantenibilidad. Cambiar el color de todo un sitio significa editar una hoja de estilos, no buscar entre cientos de atributos en línea.
- Validación. El W3C Markup Validator y los linters de HTML reportan los atributos obsoletos como errores o advertencias, por lo que fallan en las verificaciones modernas de build/CI.
- Durabilidad. Los navegadores aún procesan la mayoría de estos atributos gracias a reglas de análisis heredadas, por lo que una página que los usa normalmente se ve bien hoy. El riesgo no es una ruptura inmediata, sino que el atributo ya no forma parte de la especificación y el soporte puede eliminarse en el futuro.
En resumen: los atributos obsoletos suelen seguir funcionando, pero conviene migrarlos a CSS. La columna "Alternativa" a continuación indica qué propiedad usar.
Obsoleto no es lo mismo que eliminado. Un atributo obsoleto (deprecated) está desaconsejado pero generalmente los navegadores aún lo procesan. Una función eliminada (obsolete) ha sido retirada completamente de la especificación — por ejemplo, basefont aquí hace referencia al elemento <basefont> totalmente eliminado, que los navegadores modernos pueden ignorar. Trate cualquier elemento de esta página como algo a reemplazar, y las funciones eliminadas como algo que puede que ya no tenga ningún efecto.
Antes y después: reemplazar un atributo obsoleto con CSS
El patrón de migración es siempre el mismo — eliminar el atributo de presentación y trasladar la intención a una regla CSS. Por ejemplo, una celda de tabla roja:
<!-- Deprecated: presentation baked into the markup -->
<td bgcolor="#ff0000">Sale</td>
<!-- Modern: structure in HTML, color in CSS -->
<td class="sale">Sale</td>.sale {
background-color: #ff0000;
}Algunas conversiones comunes más en paralelo:
<!-- align on a paragraph -->
<p align="center">Hello</p> → <p class="centered">Hello</p>
<!-- width/height on an image's wrapper, spacing around an image -->
<img src="logo.png" hspace="10" vspace="10"> → <img src="logo.png" class="spaced">
<!-- text color on the page body -->
<body text="#333333"> → <body> (styled in CSS).centered { text-align: center; }
.spaced { margin: 10px; }
body { color: #333333; }Lista de atributos HTML obsoletos
Los atributos a continuación están obsoletos en las etiquetas indicadas y deben reemplazarse por la propiedad que se muestra en la columna Alternativa.
| Atributos | Descripción | Obsoleto en | Alternativa |
|---|---|---|---|
| align | Especifica la alineación del elemento | <caption>, <img>, <table>, <hr>, <div>, <h1>-<h6>, <p> | Propiedades CSS text-align, float y vertical-align |
| alink | Especifica el color de un enlace activo en un documento | <body> | Pseudoclase CSS active |
| background | Especifica la imagen de fondo | <body> | Propiedad CSS background-image |
| bgcolor | Especifica el color de fondo | <body>, <table>, <tr>, <td>, <th> | Propiedad CSS background-color |
| border | Especifica el ancho del borde | <img>, <object> | Propiedad CSS border-width |
| clear | Elimina cualquier alineación izquierda o derecha | <br> | Propiedad CSS clear |
| compact | Especifica que la lista debe renderizarse más pequeña de lo normal | <ol>, <ul> | CSS font-size, margin y line-height para una lista más compacta |
| height | Especifica la altura del elemento | <table> | Propiedad CSS height |
| hspace | Especifica el espacio en blanco o relleno en los lados izquierdo o derecho de un elemento | <img>, <object> | Propiedad CSS padding |
| language | Especifica el lenguaje de scripting | <script> | El atributo type |
| link | Especifica el color predeterminado de los enlaces | <body> | Pseudoclase CSS link |
| noshade | Especifica que una línea horizontal debe renderizarse en un solo color sólido (sin sombreado) | <hr> | Propiedad CSS border-style |
| nowrap | Especifica que el texto no debe ajustarse dentro de la celda de la tabla | <td>, <th> | Propiedad CSS white-space |
| size | Especifica el ancho inicial del campo de entrada y el número de filas visibles del elemento select | <basefont>, <font>, <hr> | Propiedad CSS width |
| text | Especifica el color del texto | <body> | Propiedad CSS color |
| type | Especifica el tipo de lista | <li> | Propiedad CSS list-style-type |
| vlink | Especifica el color de los enlaces visitados | <body> | Pseudoclase CSS visited |
| valign | Especifica la alineación vertical del contenido de la celda | <td>, <th>, <tr> | Propiedad CSS vertical-align |
| vspace | Especifica el espacio en blanco o relleno encima o debajo de un elemento | <img>,<object> | Propiedad CSS padding |
| width | Especifica el ancho del elemento | <hr>,<pre>,<td>,<th> | Propiedad CSS width |
No todo lo que parece 'antiguo' está obsoleto. El atributo start en <ol> (que establece el primer número) y el atributo value en <li> (que establece el número de un elemento específico) siguen siendo válidos en HTML5 — afectan a la semántica de la lista, no solo a su apariencia, por lo que no es necesario reemplazarlos con CSS.
A continuación
- Consulta el resumen completo de HTML Attributes para aprender cómo funcionan los atributos y cuáles están vigentes.
- ¿Eres nuevo en trasladar estilos a hojas de estilo? Empieza con CSS Syntax y la CSS Introduction.