Tag HTML <marquee>
Il tag HTML marquee, ormai obsoleto, scorreva testo o immagini. Scopri perché è stato rimosso e come usare le animazioni CSS.
L'elemento <marquee> è un tag HTML obsoleto e non standard che veniva utilizzato per creare testo o immagini scorrevoli. Faceva scorrere i contenuti orizzontalmente oppure verticalmente sulla pagina web. Come l'elemento <blink> di Netscape, era ampiamente criticato per i suoi problemi di usabilità.
Non usare <marquee> nel nuovo codice. È stato rimosso dall'HTML Living Standard ed è ufficialmente obsoleto. Gli esempi in questa pagina esistono solo per aiutarti a riconoscere e sostituire il codice legacy — non costituiscono una raccomandazione. Per gli effetti di scorrimento oggi, usa la sostituzione moderna con CSS qui sotto. Consulta anche l'elenco dei tag HTML deprecati.
Questa pagina illustra cosa faceva <marquee>, perché è stato eliminato, come riprodurre il suo effetto con animazioni CSS conformi agli standard e le regole di accessibilità da rispettare quando i contenuti si muovono sullo schermo.
Perché <marquee> è stato rimosso
Sebbene la maggior parte dei browser renda ancora <marquee> per compatibilità con le versioni precedenti, dovresti trattarlo come obsoleto:
- Non è presente in alcuna specifica corrente. I produttori di browser possono rimuoverne il supporto in qualsiasi momento, e strumenti, linter e validatori lo segnalano come errore.
- È presentazione nel markup. Le animazioni appartengono al CSS, non agli elementi HTML.
- Danneggia l'accessibilità. I contenuti in continuo movimento possono violare le WCAG (vedi Accessibilità sotto).
Sostituzione moderna con CSS
L'effetto marquee è semplicemente un elemento traslato attraverso il suo contenitore in un ciclo. Puoi riprodurlo con @keyframes CSS e la proprietà transform — senza JavaScript e senza tag obsoleti.
<!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>Poiché il movimento risiede ora nel CSS, puoi controllarne la velocità con animation-duration, la direzione scambiando i valori di translateX, e la fluidità con le proprietà transition e animation — tutte standard e pienamente supportate.
Avvertenza sull'accessibilità
I contenuti in movimento rappresentano un problema reale di accessibilità, non una preferenza stilistica.
- Il criterio di successo WCAG 2.2.2 (Pausa, Stop, Nascondi) richiede che qualsiasi contenuto che si muove, lampeggia o scorre automaticamente per più di cinque secondi possa essere messo in pausa, fermato o nascosto dall'utente. Un
<marquee>semplice non offre tale controllo, quindi non soddisfa questo criterio. - Rispetta
prefers-reduced-motion. Alcuni utenti hanno esplicitamente chiesto al proprio sistema di ridurre al minimo le animazioni (possono causare nausea o vertigini). Disabilita lo scorrimento per loro:
@media (prefers-reduced-motion: reduce) {
.marquee span {
animation: none;
}
}- Fornisci un controllo di pausa. L'esempio CSS precedente mette in pausa al passaggio del mouse tramite
animation-play-state, ma il mouse non è disponibile per gli utenti da tastiera o touch. Per i contenuti importanti, aggiungi un pulsante Pausa/Play visibile che attiva e disattivaanimation-play-statein modo che tutti possano fermare il movimento.
Alternative al tag HTML <marquee>
Oltre all'approccio puramente CSS descritto sopra, puoi creare effetti di scorrimento più ricchi combinando CSS e JavaScript. Leggi il nostro snippet per saperne di più su questo metodo.
Sintassi legacy (solo per riferimento)
Gli esempi in questa sezione sono codice legacy conservati qui solo per aiutarti a riconoscerlo e migrarlo. Non aggiungere <marquee> alle nuove pagine — usa la sostituzione moderna con CSS invece.
Il tag <marquee> va a coppie. Il contenuto è scritto tra i tag di apertura (<marquee>) e chiusura (</marquee>).
Esempio di utilizzo del tag HTML <marquee>:
Esempio del tag 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 l'attributo direction dell'elemento <marquee> per cambiare la direzione del testo o dell'immagine. Guarda un altro esempio in cui il testo scorre dall'alto verso il basso.
Esempio di testo scorrevole:
Esempio del tag <marquee> con l'attributo 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>Vediamo ora un esempio di utilizzo dell'elemento <marquee> per visualizzare un'immagine scorrevole:
Esempio di immagine scorrevole:
Esempio del tag <marquee> con gli attributi behavior e 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 le proprietà CSS width e background-color per stilizzare l'elemento <marquee>.
Esempio di creazione di testo scorrevole con il tag HTML <marquee>:
Esempio di come stilizzare il tag HTML <marquee> con le proprietà width e 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>Attributi
I seguenti attributi venivano utilizzati per regolare l'aspetto dell'elemento <marquee>. Tutti sono non standard. Non sono definiti in alcuna specifica corrente e gli strumenti conformi alle specifiche li segnalano; anche dove i browser li supportano ancora oggi, tale comportamento non è garantito.
| Attributo | Valore | Descrizione |
|---|---|---|
| behavior | scroll, slide, alternate | Definisce il tipo di scorrimento. |
| bgcolor | rgb(x,x,x), #xxxxxx, colorname | Imposta il colore di sfondo. |
| direction | up, down, left, right | Imposta la direzione del contenuto scorrevole. |
| height | pixels, % | Definisce l'altezza del marquee. |
| hspace | pixels | Definisce lo spazio orizzontale attorno al marquee. |
| loop | number | Definisce quante volte il contenuto scorre. Se omesso, il contenuto scorre indefinitamente. |
| scrollamount | number | Definisce la quantità di scorrimento a ogni intervallo in pixel. Il valore predefinito è 6. |
| scrolldelay | milliseconds | Definisce il ritardo tra uno scorrimento e l'altro. Il valore predefinito è 85. |
| truespeed | boolean | Abilita una velocità di scorrimento uniforme tra diversi browser. |
| vspace | pixels | Definisce lo spazio verticale attorno al marquee. |
| width | pixels, % | Definisce la larghezza del marquee. |
Il tag <marquee> supporta anche gli attributi globali e gli attributi evento.