HTML <marquee> Tag

What You’ll Learn

The <marquee> tag is a classic HTML element for scrolling text and images. This guide explains how it worked, why it is deprecated, and what to use instead.

What Is the <marquee> Tag?

The <marquee> element is an HTML tag used to create scrolling text or images horizontally or vertically within a web page. It was widely used in the early days of the web for attention-grabbing banners, news tickers, and promotional messages.

Despite its nostalgic appeal, understanding marquee helps you read legacy HTML and maintain older systems. For all new development, prefer CSS-based scrolling with prefers-reduced-motion support.

📝 Syntax

Enclose the content you want to scroll between opening and closing <marquee> tags. Customize direction, behavior, and speed with attributes:

<marquee
  direction="left"
  behavior="scroll"
  scrollamount="3"
>
  Your Scrolling Content Here
</marquee>

Syntax Rules

• <marquee> requires both opening and closing tags.
• Place text, images, or other inline content inside the element.
• Attributes control scroll direction, speed, and looping behavior.
• Modern browsers may ignore scrolling or render content as static text.

⚖️ <marquee> vs CSS Animation

CSS gives you full control over timing, direction, and accessibility that the legacy tag never offered:

Examples Gallery

Historical marquee patterns plus the modern CSS replacement. Native marquee may not work in all modern browsers—demos use CSS animation to show the scrolling effect.

<marquee behavior="scroll" direction="left">
  Welcome to Our Website!
</marquee>

<marquee behavior="scroll" direction="left">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</marquee>

<style>
  .ticker {
    overflow: hidden;
    white-space: nowrap;
    background: #f1f5f9;
    padding: 0.5rem 0;
  }
  .ticker span {
    display: inline-block;
    animation: scroll-left 12s linear infinite;
  }
  @keyframes scroll-left {
    from { transform: translateX(100%); }
    to   { transform: translateX(-100%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .ticker span { animation: none; }
  }
</style>
<div class="ticker">
  <span>Welcome to Our Website!</span>
</div>

♿ Accessibility

Scrolling content creates serious accessibility problems:

• Motion sensitivity — moving text can trigger dizziness or nausea (vestibular disorders)
• Reading difficulty — users cannot comfortably read content that scrolls continuously
• WCAG guidelines — avoid content that moves automatically without user control
• prefers-reduced-motion — always provide a static fallback when using CSS animations
• Better alternatives — use static headlines, carousels with pause buttons, or subtle CSS effects

💡 Best Practices