Balise HTML <marquee>
La balise <marquee> est une balise HTML non standard qui était utilisée pour créer du texte défilant ou des images. Elle faisait défiler du texte ou des images horizontalement ou verticalement sur la page web. En raison de ses problèmes d'utilisabilité, elle était souvent comparée à l'élément blink de Netscape.
DANGER
La balise <marquee> est une balise HTML dépréciée. Si vous l'utilisez, vos pages ou applications peuvent être endommagées. Bien que dépréciée, la balise fonctionne toujours dans la plupart des navigateurs modernes.
Alternatives à la balise HTML <marquee>
Comme mentionné ci-dessus, la balise HTML <marquee> est dépréciée et les développeurs évitent souvent de l'utiliser. De nos jours, vous pouvez obtenir le même résultat avec CSS et JavaScript. Consultez notre snippet pour en savoir plus sur cette méthode.
Syntaxe
La balise <marquee> s'utilise par paire. Le contenu est écrit entre la balise d'ouverture (<marquee>) et la balise de fermeture (<​/marquee>).
Exemple d'utilisation de la balise HTML <marquee> :
Exemple de la balise 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>Utilisez l'attribut direction de l'élément <marquee> pour changer la direction du texte ou de l'image. Consultez un autre exemple où le texte défile de haut en bas.
Exemple de texte défilant :
Exemple de la balise <marquee> avec l'attribut 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>Voyons maintenant un exemple d'utilisation de l'élément <marquee> pour afficher une image défilante :
Exemple d'image défilante :
Exemple de la balise <marquee> avec les attributs behavior et 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
Utilisez les propriétés CSS width et background-color pour styliser l'élément <marquee>.
Exemple de création d'un texte défilant avec la balise HTML <marquee> :
Exemple de stylisation de la balise HTML <marquee> avec les propriétés width et 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>Attributs
Les attributs suivants peuvent être utilisés pour ajuster l'apparence de l'élément <marquee>.
| Attribut | Valeur | Description |
|---|---|---|
| behavior | scroll, slide, alternate | Définit le type de défilement. |
| bgcolor | rgb(x,x,x), #xxxxxx, colorname | Définit la couleur de fond. |
| direction | up, down, left, right | Définit la direction du contenu défilant. |
| height | pixels, % | Définit la hauteur du marquee. |
| hspace | pixels | Définit l'espace horizontal autour du marquee. |
| loop | number | Définit le nombre de fois que le contenu va défiler. Si omis, le contenu défile indéfiniment. |
| scrollamount | number | Définit la quantité de défilement à chaque intervalle en pixels. La valeur par défaut est 6. |
| scrolldelay | milliseconds | Définit le délai entre chaque défilement. La valeur par défaut est 85. |
| truespeed | boolean | Active une vitesse de défilement constante sur différents navigateurs. |
| vspace | pixels | Définit l'espace vertical autour du marquee. |
| width | pixels, % | Définit la largeur du marquee. |
La balise <marquee> prend également en charge les attributs globaux et les attributs d'événement.
Comment styliser une balise HTML <marquee>
{
"tag_name": "marquee"
}Pratique
Quel est l'objectif de la balise HTML marquee telle que décrite sur la page web ?