HTML <marquee> Element

The <marquee> element was historically used to make text, images, and other content automatically scroll across part of a webpage. It could move content horizontally or vertically and offered several attributes for controlling its direction, speed, repetition, and scrolling behavior.

Obsolete Element: The <marquee> element must not be used in new HTML. CSS animations can create controlled scrolling effects when movement is genuinely useful, although continuously moving content should be used carefully because it can distract users and create accessibility problems.

Historical Syntax

Older webpages may contain markup similar to the following:

<marquee direction="left" scrollamount="5">
  Welcome to my website!
</marquee>

In supporting browsers, the text automatically moved across the available area from right to left. Authors could change the direction, speed, repetition, and type of movement with attributes on the element. This code is shown for historical reference only and should not be used in modern HTML.

Attributes

The <marquee> element historically supported numerous element-specific attributes for controlling the appearance and movement of its contents. These attributes are obsolete along with the element and are included here to help identify and understand older HTML source code.

Attribute	Description
`behavior`	Specified how the content moved, historically using values such as `scroll`, `slide`, or `alternate`.
`bgcolor`	Specified a background color for the marquee area.
`direction`	Specified the direction of movement using `left`, `right`, `up`, or `down`.
`height`	Specified the height of the marquee area.
`hspace`	Specified horizontal space around the marquee.
`loop`	Specified how many times the scrolling movement should repeat.
`scrollamount`	Specified the distance the content moved during each step of the scrolling animation.
`scrolldelay`	Specified the delay between individual movement steps.
`truespeed`	Allowed very small `scrolldelay` values to be used instead of having the browser enforce its normal minimum delay.
`vspace`	Specified vertical space around the marquee.
`width`	Specified the width of the marquee area.

Historical Use

The <marquee> element was introduced by Microsoft for Internet Explorer and was never part of the standard HTML language. Other browsers later implemented it for compatibility, which helped the element become widely used despite its non-standard origin.

Web authors used marquees for announcements, news headlines, advertising messages, welcome messages, images, and ticker-style displays. The element could scroll continuously, move across the screen once, or bounce its contents back and forth between the edges of its display area.

The element did provide an extremely simple way to create movement without scripting. That convenience contributed to its popularity, but it also encouraged webpages filled with unnecessary moving text and graphics.

Why It Became Obsolete

The <marquee> element mixed visual presentation and animation directly into HTML rather than describing the meaning or structure of its content. Its behavior was controlled through proprietary presentational attributes and was never standardized as part of HTML.

Automatically moving content can also be difficult to read and may distract visitors from the rest of the page. Movement can create additional accessibility concerns for users who are sensitive to animation or who need more time to read content.

CSS animations provide substantially more control over movement, timing, direction, responsiveness, and accessibility. Modern CSS also allows animations to be reduced or disabled when a visitor has requested reduced motion through their operating system or browser settings.

Modern Alternative

When scrolling content serves a useful purpose, CSS animation can reproduce the general movement once provided by <marquee>. The content remains ordinary HTML while CSS controls its presentation and movement.

<div class="scroll-container">
  <p class="scroll-text">Welcome to my website!</p>
</div>

.scroll-container {
  overflow: hidden;
  white-space: nowrap;
}

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

@keyframes scroll-text {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

When motion is not essential to understanding the content, the animation can be disabled for visitors who prefer reduced motion:

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

Play in Editor

CSS makes the effect much more flexible than the historical <marquee> element, but scrolling content should still be used only when the movement provides a genuine benefit to the visitor.

Legacy Browser Support

Although <marquee> was never a standard HTML element, browsers implemented it widely for compatibility with existing webpages. Modern browsers may therefore continue to recognize and animate old <marquee> markup.

This legacy browser behavior does not make <marquee> valid modern HTML. Existing marquee elements should be replaced with ordinary HTML and CSS when older webpages are updated.

For detailed legacy browser compatibility information, see Can I Use: HTML <marquee> Element .

The obsolete <blink> element was another historical attempt to attract attention through automatic movement or visual changes. Modern HTML does not provide a direct replacement for either element because animation and movement are presentation concerns that are handled with CSS.

Specifications

The <marquee> element is listed as an entirely obsolete, non-conforming feature in the WHATWG HTML Living Standard . It originated as a proprietary browser feature and should not be used in modern HTML.

HTML <marquee> Element