W3docs
en
Log in

HTML <marquee> Tag

The obsolete HTML marquee tag scrolled text or images across the page. Learn why it was removed and how to scroll content with CSS animations.

The <marquee> element is an obsolete, non-standard HTML tag that was used to create scrolling text or images. It made content scroll horizontally across or vertically down the web page. Like Netscape's <blink> element, it was widely criticized for its usability problems.

Danger

Do not use <marquee> in new code. It was removed from the HTML Living Standard and is officially obsolete. The examples on this page exist only so you can recognize and replace legacy code — they are not a recommendation. For scrolling effects today, use the modern CSS replacement below. See also the list of deprecated HTML tags.

HTML marquee tag example

This page covers what <marquee> did, why it was dropped, how to reproduce its effect with standards-compliant CSS animations, and the accessibility rules you must follow when content moves on screen.

Why <marquee> was removed

Although most browsers still render <marquee> for backward compatibility, you should treat it as broken:

  • It is not in any current specification. Browser vendors are free to remove support at any time, and tools, linters, and validators flag it as an error.
  • It is presentation in markup. Animation belongs in CSS, not in HTML elements.
  • It harms accessibility. Continuously moving content can violate WCAG (see Accessibility below).

Modern CSS replacement

The marquee effect is just an element translated across its container on a loop. You can reproduce it with CSS @keyframes and the transform property — no JavaScript and no obsolete tags required.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .marquee {
        overflow: hidden;       /* hide the text outside the box */
        white-space: nowrap;    /* keep the text on one line */
        box-sizing: border-box;
      }
      .marquee span {
        display: inline-block;
        padding-left: 100%;     /* start fully off-screen on the right */
        animation: scroll-left 12s linear infinite;
      }
      @keyframes scroll-left {
        from { transform: translateX(0); }
        to   { transform: translateX(-100%); }
      }
      /* Pause the animation when the user hovers, giving them control. */
      .marquee:hover span {
        animation-play-state: paused;
      }
    </style>
  </head>
  <body>
    <div class="marquee">
      <span>A scrolling text created with CSS animation instead of marquee.</span>
    </div>
  </body>
</html>

Because the movement now lives in CSS, you control its speed with animation-duration, its direction by swapping the translateX values, and its smoothness with the transition and animation properties — all of which are standard and fully supported.

Accessibility warning

Moving content is a real accessibility concern, not a style preference.

  • WCAG Success Criterion 2.2.2 (Pause, Stop, Hide) requires that any content which moves, blinks, or scrolls automatically for more than five seconds can be paused, stopped, or hidden by the user. A bare <marquee> offers no such control, so it fails this criterion.
  • Respect prefers-reduced-motion. Some users have explicitly asked their system to minimize animation (it can trigger nausea or vertigo). Disable the scroll for them:
@media (prefers-reduced-motion: reduce) {
  .marquee span {
    animation: none;
  }
}
  • Provide a pause control. The CSS example above pauses on hover via animation-play-state, but hover is not available to keyboard or touch users. For important content, add a visible Pause/Play button that toggles animation-play-state so everyone can stop the motion.

Alternatives to the HTML <marquee> tag

Besides the pure-CSS approach above, you can build richer scrolling effects with CSS and JavaScript together. Read our snippet to learn more about this method.

Legacy syntax (for reference only)

Warning

The examples in this section are legacy code kept here only to help you recognize and migrate it. Do not add <marquee> to new pages — use the modern CSS replacement instead.

The <marquee> tag comes in pairs. The content is written between the opening (<marquee>) and closing (</marquee>) tags.

Example of using the HTML <marquee> tag:

Example of the HTML <marquee> tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      marquee{
      font-size: 30px;
      font-weight: 800;
      color: #8ebf42;
      font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <marquee>A scrolling text created with HTML Marquee element.</marquee>
  </body>
</html>
Try it Yourself »

Use the direction attribute of the <marquee> element to change the direction of the text or image. See another example where the text scrolls from top to bottom.

Example of a scrolling text:

Example of the <marquee> tag with the direction attribute

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <marquee direction="down">A scrolling text created with HTML Marquee element.</marquee>
  </body>
</html>
Try it Yourself »

Now let's see an example of using the <marquee> element to display a scrolling image:

Example of a scrolling image:

Example of the <marquee> tag with behavior and direction attributes

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
     <marquee behavior="scroll" direction="up">
      <img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="W3docs" />
    </marquee>
  </body>
</html>
Try it Yourself »
Tip

Use CSS width and background-color properties to style the <marquee> element.

Example of creating a scrolling text with the HTML <marquee> tag:

Example of how to style the HTML <marquee> tag with width and background-color properties

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <style> 
      marquee {
        width: 100%;
        padding: 10px 0;
        background-color: lightblue;
      }
    </style>
    <marquee direction="scroll">This scrolling text is created with HTML Marquee element and styled with CSS properties.</marquee>
  </body>
</html>
Try it Yourself »

Attributes

The following attributes were used to adjust the appearance of the <marquee> element. All of them are non-standard. They are not defined in any current specification, and spec-compliant tooling will flag them; even where browsers still honor them today, that behavior is not guaranteed.

AttributeValueDescription
behaviorscroll, slide, alternateDefines the scrolling type.
bgcolorrgb(x,x,x), #xxxxxx, colornameSets the background color.
directionup, down, left, rightSets the direction for the scrolling content.
heightpixels, %Defines the marquee's height.
hspacepixelsDefines horizontal space around the marquee.
loopnumberDefines how many times the content will scroll. If omitted, the content scrolls indefinitely.
scrollamountnumberDefines the scrolling amount at each interval in pixels. Default value is 6.
scrolldelaymillisecondsDefines the delay between each scroll. The default value is 85.
truespeedbooleanEnables consistent scrolling speed across different browsers.
vspacepixelsDefines vertical space around the marquee.
widthpixels, %Defines the marquee's width.

The <marquee> tag also supports the Global attributes and Event attributes.

Practice

Practice
Which CSS features should you use to reproduce the old marquee scrolling effect in modern code?
Which CSS features should you use to reproduce the old marquee scrolling effect in modern code?
Was this page helpful?