HTML <marquee> Tag and Modern CSS Scrolling Text

The HTML <marquee> element was used to make text or images move automatically across a page. It is now an obsolete, non-standard element and should not be used for new websites.

If you are maintaining old HTML, the legacy examples below explain how marquee worked. For new pages, use CSS animation so movement, styling and accessibility can be controlled explicitly.

Legacy <marquee> Example Top ↑

<marquee>This is an example of Marquee</marquee>

Legacy rendered example:

This browser-rendered example is retained so older pages can be understood, not as a recommendation for new HTML.

Scrolling an Image with Legacy Marquee Top ↑

The old element could contain an image as well as text:

<marquee>
  <img src="images/left.jpg" alt="Left arrow">
</marquee>

Legacy rendered example:

Attributes such as direction, behavior, scrollamount, scrolldelay and loop were commonly used with marquee. They belong to this obsolete element and should not be treated as modern HTML animation APIs.

Modern CSS Alternative Top ↑

A modern version can use a normal element plus CSS animation. The content remains ordinary HTML, while movement is handled in CSS.

<div class="ticker">
  <span>Latest announcement from plus2net</span>
</div>

.ticker {
  overflow: hidden;
  white-space: nowrap;
}
.ticker span {
  display: inline-block;
  padding-left: 100%;
  animation: ticker 12s linear infinite;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

Unlike marquee attributes, CSS lets you control duration, easing, pause behavior, responsive layout and user motion preferences with standard styling tools.

Respect Reduced-Motion Preferences Top ↑

Continuous motion can be distracting or uncomfortable for some users. Disable non-essential animation when the user has requested reduced motion:

@media (prefers-reduced-motion: reduce) {
  .ticker span {
    animation: none;
    padding-left: 0;
  }
}

Important announcements should also remain readable without depending on motion to attract attention.

Legacy Marquee Properties Top ↑

The original Plus2net marquee tutorials cover the main legacy attributes separately:

Accessibility and Practical Guidance Top ↑

• Do not rely on automatically moving text for essential instructions or alerts.
• Give users enough time to read content and avoid unnecessary continuous movement.
• Respect prefers-reduced-motion for non-essential animation.
• Keep text selectable and understandable even when animation is disabled.
• Use useful alt text for informative images; do not depend on movement to explain the image.

Common Marquee Mistakes Top ↑

Using <marquee> in a new project Top ↑

The element is obsolete and non-standard. Use CSS animation when motion is genuinely useful.

Using movement just to attract attention Top ↑

Constant motion can reduce readability. Use visual hierarchy, headings and appropriate styling before adding animation.

Assuming marquee attributes are modern CSS properties Top ↑

Attributes such as scrollamount, scrolldelay and behavior belong to the old marquee element. Modern animations use CSS properties and keyframes.

Ignoring reduced-motion settings Top ↑

Non-essential animation should be removable for users who prefer reduced motion.

Frequently Asked Questions Top ↑

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: