<marquee> - Scrolling Text (Deprecated)

The `<marquee>` Element

Deprecated Non-standard

The <marquee> element was a proprietary HTML element introduced by Microsoft Internet Explorer 2.0 in 1995. It created scrolling or bouncing text and images without requiring any scripting. While it became widely supported due to IE’s dominance, it was never standardized and is now considered obsolete.

Historical Overview

The element was designed to add visual interest to web pages by animating content horizontally or vertically across the screen. Despite its popularity in the early web era (late 1990s to early 2000s), it suffered from numerous problems that led to its deprecation.

Historical Attributes

These attributes controlled the marquee’s behavior. They are documented here for historical reference only.

Behavior and Movement

Attribute	Description	Values	Default
`behavior`	Type of scrolling	`scroll`, `slide`, `alternate`	`scroll`
`direction`	Direction of movement	`left`, `right`, `up`, `down`	`left`
`scrollamount`	Speed in pixels per interval	Number (pixels)	`6`
`scrolldelay`	Milliseconds between movements	Number (ms)	`85`
`loop`	Number of times to scroll	Number or `infinite`	`infinite`

Visual Styling

Attribute	Description	Values
`bgcolor`	Background color	Color name or hex code
`width`	Width of marquee area	Pixels or percentage
`height`	Height of marquee area	Pixels or percentage
`hspace`	Horizontal margin	Number (pixels)
`vspace`	Vertical margin	Number (pixels)

Behavior Values Explained

scroll: Content scrolls completely across and starts over from the opposite side.

slide: Content scrolls in from one side and stops when it reaches the other.

alternate: Content bounces back and forth between the edges.

Historical Example

<!-- Basic scrolling marquee -->
<marquee>This text scrolls from right to left</marquee>

<!-- Bouncing marquee -->
<marquee behavior="alternate" bgcolor="#ffeb3b" width="300">
Bouncing text!
</marquee>

<!-- Scrolling up -->
<marquee direction="up" height="100" scrollamount="2">
<p>Scrolling up slowly</p>
<p>Line 2</p>
<p>Line 3</p>
</marquee>

<!-- Fast scrolling with limited loops -->
<marquee scrollamount="15" scrolldelay="50" loop="3">
Fast scrolling text (only 3 loops)
</marquee>

Result

Interactive code playground requires JavaScript. Here's the code:

<!-- Basic scrolling marquee -->
<marquee>This text scrolls from right to left</marquee>

<!-- Bouncing marquee -->
<marquee behavior="alternate" bgcolor="#ffeb3b" width="300">
Bouncing text!
</marquee>

<!-- Scrolling up -->
<marquee direction="up" height="100" scrollamount="2">
<p>Scrolling up slowly</p>
<p>Line 2</p>
<p>Line 3</p>
</marquee>

<!-- Fast scrolling with limited loops -->
<marquee scrollamount="15" scrolldelay="50" loop="3">
Fast scrolling text (only 3 loops)
</marquee>

Why It’s Deprecated

The <marquee> element was deprecated for several critical reasons:

Accessibility Nightmare

Screen Reader Issues: Moving content is difficult or impossible for screen reader users to consume. The text moves too quickly to be read by assistive technologies, or continuously interrupts the reading flow.

Cognitive Disabilities: People with cognitive disabilities, attention disorders, or reading difficulties cannot control the pace of information, making content effectively inaccessible.

Motion Sensitivity: Automatically moving content can trigger vestibular disorders, cause nausea, headaches, or seizures in susceptible individuals.

User Experience Problems

Distraction: Moving text draws attention away from other content, reducing comprehension and frustrating users trying to focus on static content.

Readability: Text in motion is significantly harder to read than static text, especially at higher speeds.

No User Control: Users cannot pause, slow down, or stop the animation, violating user preference and control principles.

Technical Issues

Never Standardized: It was a proprietary Microsoft invention that never became part of any W3C or WHATWG standard.

Inconsistent Implementation: Different browsers implemented it differently, causing cross-browser compatibility issues.

Poor Semantics: It mixed presentation with content, violating the separation of concerns principle.

Modern Alternatives

Use CSS animations or transitions to create controlled, accessible motion when absolutely necessary.

CSS Keyframe Animation

<style>
.scroll-container {
  overflow: hidden;
  background: #f0f0f0;
  padding: 10px;
  border: 1px solid #ddd;
}

.scroll-text {
  display: inline-block;
  animation: scroll-left 10s linear infinite;
}

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

/* Respect user preferences */
@media (prefers-reduced-motion: reduce) {
  .scroll-text {
    animation: none;
  }
}
</style>

<div class="scroll-container">
<div class="scroll-text">
  This text scrolls using CSS animations
</div>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.scroll-container {
  overflow: hidden;
  background: #f0f0f0;
  padding: 10px;
  border: 1px solid #ddd;
}

.scroll-text {
  display: inline-block;
  animation: scroll-left 10s linear infinite;
}

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

/* Respect user preferences */
@media (prefers-reduced-motion: reduce) {
  .scroll-text {
    animation: none;
  }
}
</style>

<div class="scroll-container">
<div class="scroll-text">
  This text scrolls using CSS animations
</div>
</div>

CSS Transform with Controlled Speed

<style>
.bounce-container {
  width: 300px;
  height: 50px;
  background: #ffeb3b;
  position: relative;
  overflow: hidden;
  border: 2px solid #fbc02d;
}

.bounce-text {
  position: absolute;
  animation: bounce 3s ease-in-out infinite alternate;
  padding: 15px;
}

@keyframes bounce {
  from {
    left: 0;
  }
  to {
    left: calc(100% - 150px);
  }
}

/* Respect user preferences */
@media (prefers-reduced-motion: reduce) {
  .bounce-text {
    animation: none;
    left: 10px;
  }
}
</style>

<div class="bounce-container">
<div class="bounce-text">Bouncing text!</div>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.bounce-container {
  width: 300px;
  height: 50px;
  background: #ffeb3b;
  position: relative;
  overflow: hidden;
  border: 2px solid #fbc02d;
}

.bounce-text {
  position: absolute;
  animation: bounce 3s ease-in-out infinite alternate;
  padding: 15px;
}

@keyframes bounce {
  from {
    left: 0;
  }
  to {
    left: calc(100% - 150px);
  }
}

/* Respect user preferences */
@media (prefers-reduced-motion: reduce) {
  .bounce-text {
    animation: none;
    left: 10px;
  }
}
</style>

<div class="bounce-container">
<div class="bounce-text">Bouncing text!</div>
</div>

Interactive Scrolling with User Control

<style>
.controlled-scroll {
  overflow: hidden;
  background: #e3f2fd;
  padding: 10px;
  border: 1px solid #2196f3;
}

.scroll-content {
  display: inline-block;
  animation: scroll-rtl 8s linear infinite;
  animation-play-state: paused;
}

.controlled-scroll.playing .scroll-content {
  animation-play-state: running;
}

@keyframes scroll-rtl {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

.control-btn {
  margin-top: 10px;
  padding: 8px 16px;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-content {
    animation: none !important;
  }
}
</style>

<div class="controlled-scroll" id="scrollDemo">
<div class="scroll-content">
  Click the button to start/stop scrolling
</div>
</div>
<button class="control-btn" onclick="
document.getElementById('scrollDemo').classList.toggle('playing');
this.textContent = this.textContent === 'Pause' ? 'Play' : 'Pause';
">Play</button>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.controlled-scroll {
  overflow: hidden;
  background: #e3f2fd;
  padding: 10px;
  border: 1px solid #2196f3;
}

.scroll-content {
  display: inline-block;
  animation: scroll-rtl 8s linear infinite;
  animation-play-state: paused;
}

.controlled-scroll.playing .scroll-content {
  animation-play-state: running;
}

@keyframes scroll-rtl {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

.control-btn {
  margin-top: 10px;
  padding: 8px 16px;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-content {
    animation: none !important;
  }
}
</style>

<div class="controlled-scroll" id="scrollDemo">
<div class="scroll-content">
  Click the button to start/stop scrolling
</div>
</div>
<button class="control-btn" onclick="
document.getElementById('scrollDemo').classList.toggle('playing');
this.textContent = this.textContent === 'Pause' ? 'Play' : 'Pause';
">Play</button>

Accessibility Considerations

Automatically moving content violates multiple Web Content Accessibility Guidelines (WCAG):

WCAG 2.2 Violations

2.2.2 Pause, Stop, Hide (Level A): For any moving, blinking, or scrolling information that starts automatically, lasts more than 5 seconds, and is presented in parallel with other content, users must have a mechanism to pause, stop, or hide it.

2.3.1 Three Flashes or Below Threshold (Level A): Rapid movement can trigger seizures in susceptible individuals.

2.3.3 Animation from Interactions (Level AAA): Motion animation should only be triggered by user interaction unless it’s essential.

Making Animations Accessible

When you must use animations:

Provide pause/stop controls
Respect prefers-reduced-motion media query
Keep animations subtle and slow
Ensure content is readable when static
Never use animation for critical information
Limit duration (ideally under 5 seconds)

Historical Browser Support

Browser	Support Period	Notes
IE	2.0 - 11	Original implementation (1995)
Chrome	1+	Legacy support, may be removed
Firefox	1+	Legacy support, deprecated
Safari	1.2+	Legacy support
Edge	12-18 (Legacy)	Not supported in Chromium Edge
Opera	7+	Legacy support

Standards Status

Never Standardized: The <marquee> element was never included in any W3C HTML specification or WHATWG HTML Living Standard.

Proprietary Origin: Created by Microsoft for Internet Explorer 2.0.

Reverse-Engineered: Other browsers implemented it only to maintain compatibility with IE-centric websites.

Officially Deprecated: Marked as obsolete and non-conforming in modern HTML.

Another deprecated element that made text blink. Similarly problematic for accessibility. Learn more →

CSS Animations

Modern, accessible way to create animated effects with user control. Learn more →

CSS Transitions

Smooth state changes triggered by user interactions. Learn more →

prefers-reduced-motion

CSS media query to respect user motion preferences. Learn more →

Specifications

The <marquee> element was never part of any official specification:

No W3C Standard: Never included in HTML 4.01, XHTML, or earlier standards.

No WHATWG Standard: Not part of the HTML Living Standard.

HTML5 Status: Explicitly listed as obsolete and non-conforming in HTML5.

<marquee> - Scrolling Text (Deprecated)

The <marquee> Element

Historical Overview

Historical Attributes

Behavior and Movement

Visual Styling

Behavior Values Explained

Historical Example

Why It’s Deprecated

Accessibility Nightmare

User Experience Problems

Technical Issues

Modern Alternatives

CSS Keyframe Animation

CSS Transform with Controlled Speed

Interactive Scrolling with User Control

Accessibility Considerations

WCAG 2.2 Violations

Making Animations Accessible

Historical Browser Support

Standards Status

Related Elements

Specifications

References

The `<marquee>` Element