# The “marquee” element is obsolete. Use CSS instead.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-marquee-element-is-obsolete-use-css-instead
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `<marquee>` element is obsolete, so text that scrolls across the page has to be animated with CSS instead.

Browsers still render `<marquee>` so old pages keep working, but the HTML standard lists it among the presentational features authors must not use, and points to CSS transitions and animations as the right tool for moving content. Its attributes, such as `behavior`, `direction`, `scrollamount` and `scrolldelay`, go away with it. The validator reports the element once and doesn't flag each of those attributes on its own.

Scrolling text is also hard to read, and a `<marquee>` gives visitors no way to stop it. WCAG success criterion 2.2.2 (Pause, Stop, Hide) asks for a way to pause, stop or hide content that moves by itself for more than five seconds alongside other content. Often the best fix is a plain, static line of text. If the movement has to stay, a CSS `@keyframes` animation reproduces it, and the `prefers-reduced-motion` media query turns it off for people who have asked their system to reduce motion. Pausing on hover helps mouse users, but keyboard and touch users still need a pause button to meet 2.2.2.

## Invalid example

A news line that scrolls from right to left:

```html
<marquee behavior="scroll" direction="left" scrollamount="4">
  Registration for the spring semester closes on Friday.
</marquee>
```

## Valid example

The same line scrolls with a CSS animation that pauses on hover and stops when the user prefers reduced motion:

```html
<p class="ticker">
  <span>Registration for the spring semester closes on Friday.</span>
</p>
```

```css
.ticker {
  overflow: hidden;
  white-space: nowrap;
}

.ticker span {
  display: inline-block;
  padding-left: 100%;
  animation: ticker 15s linear infinite;
}

.ticker:hover span {
  animation-play-state: paused;
}

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

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