Balise HTML <marquee>
La balise HTML marquee obsolète faisait défiler du texte ou des images. Découvrez pourquoi elle a été supprimée et comment animer du contenu avec CSS.
L'élément <marquee> est une balise HTML obsolète et non standard qui servait à créer du texte ou des images défilants. Elle faisait défiler le contenu horizontalement à travers la page ou verticalement vers le bas. Comme l'élément <blink> de Netscape, elle a été largement critiquée pour ses problèmes d'utilisabilité.
N'utilisez pas <marquee> dans du nouveau code. Elle a été retirée du standard HTML Living Standard et est officiellement obsolète. Les exemples de cette page n'existent que pour vous aider à reconnaître et remplacer du code hérité — ils ne constituent pas une recommandation. Pour des effets de défilement aujourd'hui, utilisez le remplacement CSS moderne ci-dessous. Consultez également la liste des balises HTML dépréciées.
Cette page explique ce que faisait <marquee>, pourquoi elle a été abandonnée, comment reproduire son effet avec des animations CSS conformes aux standards, et les règles d'accessibilité à respecter lorsque du contenu se déplace à l'écran.
Pourquoi <marquee> a été supprimée
Bien que la plupart des navigateurs affichent encore <marquee> pour la compatibilité ascendante, vous devriez la considérer comme obsolète :
- Elle n'est dans aucune spécification actuelle. Les fournisseurs de navigateurs sont libres d'en supprimer le support à tout moment, et les outils, linters et validateurs la signalent comme une erreur.
- C'est de la présentation dans le balisage. L'animation appartient au CSS, pas aux éléments HTML.
- Elle nuit à l'accessibilité. Un contenu en mouvement continu peut enfreindre les WCAG (voir Accessibilité ci-dessous).
Remplacement CSS moderne
L'effet marquee consiste simplement à translater un élément à travers son conteneur en boucle. Vous pouvez le reproduire avec @keyframes CSS et la propriété transform — sans JavaScript ni balises obsolètes.
<!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>Puisque le mouvement se trouve désormais dans le CSS, vous contrôlez sa vitesse avec animation-duration, sa direction en inversant les valeurs translateX, et sa fluidité avec les propriétés transition et animation — toutes standards et entièrement prises en charge.
Avertissement sur l'accessibilité
Le contenu en mouvement est une préoccupation d'accessibilité réelle, pas une simple préférence de style.
- Le critère de succès WCAG 2.2.2 (Mettre en pause, arrêter, masquer) exige que tout contenu qui se déplace, clignote ou défile automatiquement pendant plus de cinq secondes puisse être mis en pause, arrêté ou masqué par l'utilisateur. Une
<marquee>simple n'offre aucun tel contrôle et échoue donc à ce critère. - Respectez
prefers-reduced-motion. Certains utilisateurs ont explicitement demandé à leur système de minimiser les animations (cela peut provoquer des nausées ou des vertiges). Désactivez le défilement pour eux :
@media (prefers-reduced-motion: reduce) {
.marquee span {
animation: none;
}
}- Fournissez un contrôle de pause. L'exemple CSS ci-dessus met en pause au survol via
animation-play-state, mais le survol n'est pas disponible pour les utilisateurs au clavier ou sur écran tactile. Pour du contenu important, ajoutez un bouton Pause/Lecture visible qui basculeanimation-play-stateafin que tout le monde puisse arrêter le mouvement.
Alternatives à la balise HTML <marquee>
Outre l'approche purement CSS décrite ci-dessus, vous pouvez créer des effets de défilement plus riches en combinant CSS et JavaScript.
Syntaxe héritée (pour référence uniquement)
Les exemples de cette section sont du code hérité conservé uniquement pour vous aider à le reconnaître et à le migrer. N'ajoutez pas <marquee> à de nouvelles pages — utilisez plutôt le remplacement CSS moderne.
La balise <marquee> fonctionne par paires. Le contenu est écrit entre la balise ouvrante (<marquee>) et la balise fermante (</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. Voici 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://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="W3docs" />
</marquee>
</body>
</html>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 étaient utilisés pour ajuster l'apparence de l'élément <marquee>. Ils sont tous non standard. Ils ne sont définis dans aucune spécification actuelle, et les outils conformes aux spécifications les signalent ; même là où les navigateurs les honorent encore aujourd'hui, ce comportement n'est pas garanti.
| 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 d'arrière-plan. |
| direction | up, down, left, right | Définit la direction du défilement du contenu. |
| height | pixels, % | Définit la hauteur du marquee. |
| hspace | pixels | Définit l'espace horizontal autour du marquee. |
| loop | number | Définit combien de fois le contenu défile. 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 cohérente entre 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.