HTML Marquee Element: Complete Guide

Understanding the Marquee Element

The <marquee> HTML element was a widely-used feature for creating scrolling text and content effects without JavaScript. Popular throughout the 1990s and early 2000s, it became one of the most recognizable visual elements in early web design, appearing on everything from personal homepages to major news websites.

Today, the marquee element stands as a historical artifact of web development--a deprecated feature that demonstrates how far web standards have evolved. Understanding marquee matters for developers who may encounter it in legacy codebases and need to migrate to modern web development practices that prioritize accessibility and performance. Identifying deprecated elements is also an important part of comprehensive SEO services that ensure technical excellence across your website.

Complete Marquee Attribute Reference

The marquee element supported several attributes that controlled scrolling behavior:

Core Movement Attributes

Speed and Timing

Container Attributes

Marquee Code Examples

Basic Marquee (Left Scroll)

<marquee>This text scrolls from right to left</marquee>

Alternate Direction and Behavior

<marquee direction="up" height="100">
 This text scrolls from bottom to top
</marquee>

<marquee behavior="alternate" direction="right">
 This text bounces back and forth
</marquee>

Speed Control

<!-- Fast scrolling -->
<marquee scrollamount="15">Fast movement</marquee>

<!-- Smoother, slower scrolling -->
<marquee scrollamount="2" scrolldelay="100">Slow and smooth</marquee>

Loop Control

<!-- Scrolls 10 times then stops -->
<marquee loop="10">Limited repetitions</marquee>

<!-- Continuous scrolling (default) -->
<marquee loop="-1">Never-ending scroll</marquee>

Modern CSS Animation Alternatives

Modern CSS provides robust alternatives to marquee with better performance and accessibility. These modern web development techniques use GPU-accelerated animations that run smoothly on all devices.

Basic CSS Marquee

@keyframes scroll-left {
 0% { transform: translateX(100%); }
 100% { transform: translateX(-100%); }
}

.marquee-content {
 animation: scroll-left 15s linear infinite;
 white-space: nowrap;
}

Bidirectional (Alternate) Scrolling

@keyframes bounce-horizontal {
 0%, 100% { transform: translateX(0); }
 50% { transform: translateX(200px); }
}

.bouncing-content {
 animation: bounce-horizontal 3s ease-in-out infinite;
 animation-direction: alternate;
}

Pause on Hover

.marquee-content:hover {
 animation-play-state: paused;
}

Accessibility: Respect Reduced Motion

@media (prefers-reduced-motion: reduce) {
 .marquee-content {
 animation: none;
 }
}