Etiqueta HTML <marquee>
La obsoleta etiqueta marquee de HTML desplazaba texto o imágenes por la página. Aprende por qué fue eliminada y cómo desplazar contenido con animaciones CSS.
El elemento <marquee> es una etiqueta HTML obsoleta y no estándar que se usaba para crear texto o imágenes desplazantes. Hacía que el contenido se desplazara horizontalmente o verticalmente hacia abajo en la página web. Al igual que el elemento <blink> de Netscape, fue ampliamente criticada por sus problemas de usabilidad.
No uses <marquee> en código nuevo. Fue eliminada del Estándar de HTML vigente y es oficialmente obsoleta. Los ejemplos de esta página existen únicamente para que puedas reconocer y reemplazar código heredado — no son una recomendación. Para efectos de desplazamiento hoy en día, usa el reemplazo moderno con CSS que se muestra a continuación. Consulta también la lista de etiquetas HTML obsoletas.
Esta página explica qué hacía <marquee>, por qué fue eliminada, cómo reproducir su efecto con animaciones CSS conformes a los estándares y las reglas de accesibilidad que debes seguir cuando el contenido se mueve en pantalla.
Por qué se eliminó <marquee>
Aunque la mayoría de los navegadores todavía renderizan <marquee> por compatibilidad con versiones anteriores, debes tratarla como rota:
- No forma parte de ninguna especificación actual. Los fabricantes de navegadores pueden eliminar su soporte en cualquier momento, y las herramientas, linters y validadores la marcan como un error.
- Es presentación en el marcado. Las animaciones pertenecen al CSS, no a los elementos HTML.
- Perjudica la accesibilidad. El contenido en movimiento continuo puede violar las WCAG (ver Accesibilidad más abajo).
Reemplazo moderno con CSS
El efecto marquee es simplemente un elemento que se traslada a través de su contenedor en bucle. Puedes reproducirlo con @keyframes de CSS y la propiedad transform — sin JavaScript y sin etiquetas obsoletas.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.marquee {
overflow: hidden; /* hide the text outside the box */
white-space: nowrap; /* keep the text on one line */
box-sizing: border-box;
}
.marquee span {
display: inline-block;
padding-left: 100%; /* start fully off-screen on the right */
animation: scroll-left 12s linear infinite;
}
@keyframes scroll-left {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
/* Pause the animation when the user hovers, giving them control. */
.marquee:hover span {
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="marquee">
<span>A scrolling text created with CSS animation instead of marquee.</span>
</div>
</body>
</html>Dado que el movimiento ahora reside en CSS, puedes controlar su velocidad con animation-duration, su dirección intercambiando los valores de translateX, y su suavidad con las propiedades transition y animation — todas ellas estándar y completamente compatibles.
Advertencia de accesibilidad
El contenido en movimiento es una preocupación real de accesibilidad, no una preferencia estética.
- El Criterio de Éxito 2.2.2 de las WCAG (Pausar, Detener, Ocultar) exige que cualquier contenido que se mueva, parpadee o se desplace automáticamente durante más de cinco segundos pueda ser pausado, detenido u ocultado por el usuario. Un
<marquee>sin más no ofrece ningún control de ese tipo, por lo que incumple este criterio. - Respeta
prefers-reduced-motion. Algunos usuarios han solicitado explícitamente a su sistema que minimice las animaciones (pueden provocar náuseas o vértigo). Desactiva el desplazamiento para ellos:
@media (prefers-reduced-motion: reduce) {
.marquee span {
animation: none;
}
}- Proporciona un control de pausa. El ejemplo CSS anterior pausa al pasar el cursor mediante
animation-play-state, pero el hover no está disponible para usuarios de teclado o pantalla táctil. Para contenido importante, añade un botón visible de Pausar/Reproducir que alterneanimation-play-statepara que todos puedan detener el movimiento.
Alternativas a la etiqueta HTML <marquee>
Además del enfoque puramente CSS mencionado anteriormente, puedes crear efectos de desplazamiento más ricos combinando CSS y JavaScript.
Sintaxis heredada (solo como referencia)
Los ejemplos de esta sección son código heredado conservado aquí únicamente para ayudarte a reconocerlo y migrarlo. No añadas <marquee> a páginas nuevas — usa el reemplazo moderno con CSS en su lugar.
La etiqueta <marquee> va en pares. El contenido se escribe entre las etiquetas de apertura (<marquee>) y cierre (</marquee>).
Ejemplo del uso de la etiqueta HTML <marquee>:
Ejemplo de la etiqueta HTML <marquee>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
marquee{
font-size: 30px;
font-weight: 800;
color: #8ebf42;
font-family: sans-serif;
}
</style>
</head>
<body>
<marquee>A scrolling text created with HTML Marquee element.</marquee>
</body>
</html>Usa el atributo direction del elemento <marquee> para cambiar la dirección del texto o la imagen. Observa otro ejemplo donde el texto se desplaza de arriba hacia abajo.
Ejemplo de texto desplazante:
Ejemplo de la etiqueta <marquee> con el atributo direction
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<marquee direction="down">A scrolling text created with HTML Marquee element.</marquee>
</body>
</html>Veamos ahora un ejemplo de uso del elemento <marquee> para mostrar una imagen desplazante:
Ejemplo de imagen desplazante:
Ejemplo de la etiqueta <marquee> con los atributos behavior y direction
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<marquee behavior="scroll" direction="up">
<img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="W3docs" />
</marquee>
</body>
</html>Usa las propiedades CSS width y background-color para dar estilo al elemento <marquee>.
Ejemplo de creación de texto desplazante con la etiqueta HTML <marquee>:
Ejemplo de cómo dar estilo a la etiqueta HTML <marquee> con las propiedades width y background-color
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<style>
marquee {
width: 100%;
padding: 10px 0;
background-color: lightblue;
}
</style>
<marquee direction="scroll">This scrolling text is created with HTML Marquee element and styled with CSS properties.</marquee>
</body>
</html>Atributos
Los siguientes atributos se usaban para ajustar la apariencia del elemento <marquee>. Todos ellos son no estándar. No están definidos en ninguna especificación actual, y las herramientas conformes a especificación los marcarán como errores; incluso donde los navegadores todavía los aceptan hoy, ese comportamiento no está garantizado.
| Atributo | Valor | Descripción |
|---|---|---|
| behavior | scroll, slide, alternate | Define el tipo de desplazamiento. |
| bgcolor | rgb(x,x,x), #xxxxxx, colorname | Establece el color de fondo. |
| direction | up, down, left, right | Establece la dirección del contenido desplazante. |
| height | pixels, % | Define la altura del marquee. |
| hspace | pixels | Define el espacio horizontal alrededor del marquee. |
| loop | number | Define cuántas veces se desplazará el contenido. Si se omite, el contenido se desplaza indefinidamente. |
| scrollamount | number | Define la cantidad de desplazamiento en cada intervalo, en píxeles. El valor predeterminado es 6. |
| scrolldelay | milliseconds | Define el retardo entre cada desplazamiento. El valor predeterminado es 85. |
| truespeed | boolean | Habilita una velocidad de desplazamiento constante en diferentes navegadores. |
| vspace | pixels | Define el espacio vertical alrededor del marquee. |
| width | pixels, % | Define el ancho del marquee. |
La etiqueta <marquee> también admite los atributos globales y los atributos de evento.