HTML Marquee Tag: Syntax, Usage, and Examples

The HTML marquee tag scrolls text or images across a webpage without using JavaScript or CSS animations. Even though it's outdated and not part of HTML5 standards, many beginner-friendly projects and legacy systems still include it. When used carefully, this tag can add motion and visual flair to static content.

How to Use the HTML Marquee Tag

To scroll content across the page, wrap it with the <marquee> tag. By default, the text moves from right to left.

<marquee>This is scrolling text.</marquee>

You can customize its direction, speed, number of loops, and movement style using attributes. Here are the most common ones:

• direction: Moves the text left, right, up, or down.
• scrollamount: Sets how fast it scrolls. Higher values move faster.
• behavior: Defines how the marquee behaves—scroll, slide, or alternate.
• loop: Controls how many times the animation repeats. Use infinite or a number.
• bgcolor: Sets a background color for the scrolling area.
• height and width: Control the size of the marquee box.

Here’s a more detailed example:

<marquee direction="right" scrollamount="5" behavior="alternate" bgcolor="#f2f2f2" height="40">
  This message bounces back and forth.
</marquee>

The content will move right and bounce back in the opposite direction, repeating endlessly.

When to Use the Marquee Tag in HTML

Although modern development discourages it, using marquee in HTML still has its place—especially for projects that don’t rely on strict accessibility or standards compliance.

Attracting Attention Quickly

Scrolling messages stand out. Use the marquee element HTML to call attention to time-sensitive updates like flash sales, maintenance notices, or limited-time offers.

<marquee>⚠️ Site Maintenance Tonight from 1 AM - 4 AM UTC</marquee>

This draws the user’s eyes to the update without requiring them to scroll or click.

Building Nostalgic or Retro-Themed Websites

If you're recreating the look and feel of late 1990s or early 2000s websites, the HTML marquee tag fits right in. Add it to pages for a throwback vibe or even as a joke on personal blogs.

<marquee behavior="alternate" scrollamount="7">Welcome to My Cool HTML Site 🚀</marquee>

Many meme sites, fan pages, and digital art experiments use marquee HTML this way.

Adding Movement Without JavaScript

The tag allows motion without writing any JavaScript or complicated CSS animations. You can use it in learning environments or beginner projects where simplicity matters more than polish.

<marquee scrollamount="2">Simple scrolling without code complexity.</marquee>

Examples of Marquee HTML in Action

Let’s look at practical examples where this tag shines.

Horizontal Scrolling Text

<marquee>Breaking News: HTML is still cool in 2025!</marquee>

The content scrolls from right to left by default. It’s a classic use case.

Vertical News Feed

To scroll content upward like a ticker:

<marquee direction="up" height="100" scrollamount="1">
  - New blog post: Top 5 VS Code Extensions<br>
  - Product launch at 5 PM<br>
  - Meet the Team livestream on Friday
</marquee>

This creates a vertical scroll and mimics live feeds.

Image Marquee

You can scroll images the same way you scroll text.

<marquee scrollamount="3">
  <img src="star.png" width="50">
  <img src="moon.png" width="50">
  <img src="sun.png" width="50">
</marquee>

This moves each image across the page in sequence.

Pause on Hover

While marquee doesn’t have built-in hover support, you can add interactivity with simple event handlers.

<marquee onmouseover="this.stop();" onmouseout="this.start();">
  Hover over this text to pause the scroll.
</marquee>

This allows users to read scrolling content without rushing.

Learn More About the HTML Marquee Tag

Understanding HTML Marquee Behaviour

You control how a marquee behaves using the behavior attribute:

• scroll: The default setting. Text enters from one side and exits on the other.
• slide: The text scrolls in and stops once it reaches the end.
• alternate: The content moves back and forth within the marquee box.

Example:

<marquee behavior="slide">This slides once and stops.</marquee>
<marquee behavior="alternate">This bounces left and right.</marquee>

Understanding how html marquee behaviour works helps you create more dynamic content.

Styling a Marquee

Although the <marquee> tag has limited native style options, you can add inline CSS to change fonts, colors, and spacing.

<marquee style="font-family: Arial; color: navy; font-size: 20px;">
  Customized scrolling message
</marquee>

Add background color, padding, or height to further tweak how the marquee looks:

<marquee style="background-color: #e0f7fa; padding: 10px;">
  Announcements live here!
</marquee>

Accessibility and Usability Concerns

Keep in mind that marquee text can distract users or cause discomfort, especially for those with visual processing issues. It can also confuse screen readers, since the content continuously updates without clear pause or structure.

Avoid placing essential information inside a marquee. If the user misses it while scrolling, they might not see it again—especially if you’ve limited the loop count.

Replacing Marquee with Modern Alternatives

Because HTML5 no longer supports this tag, modern web projects use CSS or JavaScript to create similar effects.

Using CSS:

<div class="scroll-text">This scrolls left using CSS</div>

.scroll-text {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  animation: scroll-left 8s linear infinite;
}

@keyframes scroll-left {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

This replicates the marquee effect with better control and accessibility.

JavaScript Option:

<div id="custom-marquee">This is moving...</div>

let pos = 100;
const marquee = document.getElementById("custom-marquee");

setInterval(() => {
  pos--;
  marquee.style.transform = `translateX(${pos}px)`;
}, 30);

These modern methods offer flexibility and broader browser support.

When You Shouldn’t Use Marquee

• On professional or accessible websites
• For long paragraphs or detailed content
• Where users need to interact with scrolling items
• In mobile environments, where animation speed may vary

Still, if you’re building a small project, experimenting, or working with legacy HTML, the tag remains a fast and easy way to animate text.

Using HTML marquee might feel outdated, but it’s still a simple tool for adding visual motion. Beginners can learn how animation works without jumping straight into complex styling or scripting. Developers maintaining old codebases might also run into it and need to know how it functions.

While marquee HTML isn’t the future of web animation, it hasn’t disappeared yet. Use it sparingly, know its limitations, and understand how to transition to modern alternatives when needed.