Etiqueta HTML <marquee>
El elemento <marquee> es una etiqueta HTML no estándar que se utilizaba para crear texto o imágenes en movimiento. Hacía que el texto o las imágenes se desplazaran horizontalmente o verticalmente por la página web. Debido a sus problemas de usabilidad, a menudo se comparaba con el elemento blink de Netscape.
DANGER
El elemento <marquee> es una etiqueta HTML obsoleta. Si la utiliza, sus páginas o aplicaciones podrían dejar de funcionar. Aunque está obsoleta, la etiqueta sigue funcionando en la mayoría de los navegadores modernos.
Alternativas a la etiqueta HTML <marquee>
Como se mencionó anteriormente, la etiqueta HTML <marquee> está obsoleta y los desarrolladores suelen evitar su uso. Hoy en día, puede lograr el mismo resultado con CSS y JavaScript. Lea nuestro fragmento de código para obtener más información sobre este método.
Sintaxis
La etiqueta <marquee> se escribe en pares. El contenido se coloca entre las etiquetas de apertura (<marquee>) y cierre (</marquee>).
Ejemplo de 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>Utilice el atributo direction del elemento <marquee> para cambiar la dirección del texto o la imagen. Consulte otro ejemplo donde el texto se desplaza de arriba hacia abajo.
Ejemplo de texto en movimiento:
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>Ahora veamos un ejemplo de uso del elemento <marquee> para mostrar una imagen en movimiento:
Ejemplo de imagen en movimiento:
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://www.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="W3docs" />
</marquee>
</body>
</html>TIP
Utilice las propiedades de CSS width y background-color para dar estilo al elemento <marquee>.
Ejemplo de creación de texto en movimiento 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 pueden utilizar para ajustar la apariencia del elemento <marquee>.
| 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 en movimiento. |
| 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 retraso 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 eventos.
Cómo dar estilo a una etiqueta HTML <marquee>
{
"tag_name": "marquee"
}Práctica
¿Cuál es el propósito de la etiqueta HTML marquee según se describe en la página web dada?