HTML <marquee> Tag
Das veraltete HTML-marquee-Tag ließ Text oder Bilder über die Seite scrollen. Erfahren Sie, warum es entfernt wurde und wie Sie Inhalte mit CSS-Animationen scrollen.
Das <marquee>-Element ist ein veraltetes, nicht standardisiertes HTML-Tag, das zum Erstellen von scrollendem Text oder scrollenden Bildern verwendet wurde. Es ließ Inhalte horizontal über die Seite gleiten oder vertikal nach unten laufen. Wie Netscapes <blink>-Element wurde es wegen seiner Benutzbarkeitsprobleme weitgehend kritisiert.
Verwenden Sie <marquee> nicht in neuem Code. Es wurde aus dem HTML Living Standard entfernt und ist offiziell veraltet. Die Beispiele auf dieser Seite dienen ausschließlich dazu, damit Sie veralteten Code erkennen und ersetzen können — sie sind keine Empfehlung. Für Scroll-Effekte verwenden Sie heute den modernen CSS-Ersatz weiter unten. Siehe auch die Liste der veralteten HTML-Tags.
Diese Seite erklärt, was <marquee> bewirkte, warum es entfernt wurde, wie sein Effekt mit standardkonformen CSS-Animationen nachgebildet werden kann und welche Barrierefreiheitsregeln Sie beachten müssen, wenn sich Inhalte auf dem Bildschirm bewegen.
Warum <marquee> entfernt wurde
Obwohl die meisten Browser <marquee> aus Gründen der Rückwärtskompatibilität noch rendern, sollten Sie es als fehlerhaft betrachten:
- Es ist in keiner aktuellen Spezifikation vorhanden. Browser-Anbieter können die Unterstützung jederzeit entfernen, und Tools, Linter und Validatoren markieren es als Fehler.
- Es ist Präsentation im Markup. Animationen gehören in CSS, nicht in HTML-Elemente.
- Es schadet der Barrierefreiheit. Kontinuierlich bewegte Inhalte können gegen die WCAG verstoßen (siehe Barrierefreiheit weiter unten).
Moderner CSS-Ersatz
Der Marquee-Effekt ist lediglich ein Element, das auf einer Schleife über seinen Container verschoben wird. Sie können ihn mit CSS @keyframes und der transform-Eigenschaft nachbilden — ohne JavaScript und ohne veraltete Tags.
<!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>Da die Bewegung jetzt in CSS liegt, steuern Sie die Geschwindigkeit mit animation-duration, die Richtung durch Vertauschen der translateX-Werte und die Geschmeidigkeit mit den Eigenschaften transition und animation — alles standardisiert und vollständig unterstützt.
Barrierefreiheitswarnung
Bewegte Inhalte sind ein echtes Barrierefreiheitsproblem, keine Stilfrage.
- WCAG-Erfolgskriterium 2.2.2 (Pausieren, Stoppen, Ausblenden) verlangt, dass jeder Inhalt, der sich automatisch bewegt, blinkt oder scrollt und dies länger als fünf Sekunden tut, vom Benutzer pausiert, gestoppt oder ausgeblendet werden kann. Ein einfaches
<marquee>bietet keine solche Möglichkeit und erfüllt dieses Kriterium daher nicht. - Respektieren Sie
prefers-reduced-motion. Manche Benutzer haben ihr System explizit aufgefordert, Animationen zu minimieren (sie können Übelkeit oder Schwindel auslösen). Deaktivieren Sie das Scrollen für diese Nutzer:
@media (prefers-reduced-motion: reduce) {
.marquee span {
animation: none;
}
}- Stellen Sie eine Pause-Schaltfläche bereit. Das obige CSS-Beispiel pausiert beim Überfahren mit der Maus über
animation-play-state, aber Hover steht Tastatur- oder Touch-Benutzern nicht zur Verfügung. Fügen Sie für wichtige Inhalte eine sichtbare Pause/Play-Schaltfläche hinzu, dieanimation-play-stateumschaltet, damit alle Benutzer die Bewegung stoppen können.
Alternativen zum HTML-<marquee>-Tag
Neben dem oben beschriebenen reinen CSS-Ansatz können Sie mit CSS und JavaScript gemeinsam reichhaltigere Scroll-Effekte erstellen.
Veraltete Syntax (nur zur Referenz)
Die Beispiele in diesem Abschnitt sind veralteter Code, der hier nur aufbewahrt wird, damit Sie ihn erkennen und migrieren können. Fügen Sie <marquee> nicht zu neuen Seiten hinzu — verwenden Sie stattdessen den modernen CSS-Ersatz.
Das <marquee>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<marquee>) und schließenden (</marquee>) Tag geschrieben.
Beispiel für die Verwendung des HTML-<marquee>-Tags:
Beispiel des HTML-<marquee>-Tags
<!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>Verwenden Sie das direction-Attribut des <marquee>-Elements, um die Richtung des Textes oder Bildes zu ändern. Sehen Sie ein weiteres Beispiel, bei dem der Text von oben nach unten scrollt.
Beispiel für einen scrollenden Text:
Beispiel des <marquee>-Tags mit dem direction-Attribut
<!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>Sehen wir uns nun ein Beispiel an, bei dem das <marquee>-Element zum Anzeigen eines scrollenden Bildes verwendet wird:
Beispiel für ein scrollendes Bild:
Beispiel des <marquee>-Tags mit den Attributen behavior und 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>Verwenden Sie die CSS-Eigenschaften width und background-color, um das <marquee>-Element zu gestalten.
Beispiel für das Erstellen eines scrollenden Textes mit dem HTML-<marquee>-Tag:
Beispiel für die Gestaltung des HTML-<marquee>-Tags mit den Eigenschaften width und 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>Attribute
Die folgenden Attribute wurden verwendet, um das Erscheinungsbild des <marquee>-Elements anzupassen. Alle sind nicht standardisiert. Sie sind in keiner aktuellen Spezifikation definiert, und spezifikationskonforme Tools markieren sie; selbst wenn Browser sie heute noch unterstützen, ist dieses Verhalten nicht garantiert.
| Attribut | Wert | Beschreibung |
|---|---|---|
| behavior | scroll, slide, alternate | Definiert den Scroll-Typ. |
| bgcolor | rgb(x,x,x), #xxxxxx, colorname | Legt die Hintergrundfarbe fest. |
| direction | up, down, left, right | Legt die Richtung des scrollenden Inhalts fest. |
| height | pixels, % | Definiert die Höhe des Marquee. |
| hspace | pixels | Definiert den horizontalen Abstand um das Marquee. |
| loop | number | Definiert, wie oft der Inhalt gescrollt wird. Wenn weggelassen, scrollt der Inhalt unbegrenzt. |
| scrollamount | number | Definiert die Scrollgeschwindigkeit in Pixeln pro Intervall. Der Standardwert ist 6. |
| scrolldelay | milliseconds | Definiert die Verzögerung zwischen den einzelnen Scrollvorgängen. Der Standardwert ist 85. |
| truespeed | boolean | Ermöglicht eine konsistente Scrollgeschwindigkeit in verschiedenen Browsern. |
| vspace | pixels | Definiert den vertikalen Abstand um das Marquee. |
| width | pixels, % | Definiert die Breite des Marquee. |
Das <marquee>-Tag unterstützt außerdem die globalen Attribute und Ereignisattribute.