HTML Marquee Tag: A Complete Guide

What is the HTML marquee Tag?

The <marquee> tag in HTML was used to create scrolling text or images in a webpage. This tag allowed content to scroll horizontally or vertically across the page, which could be useful for announcements or creating an attention-grabbing effect. However, the <marquee> tag is obsolete in HTML5 and is no longer recommended for use in modern web development. It is not supported in some browsers, and there are better alternatives like CSS animations.

Syntax of the <marquee> Tag

The syntax of the <marquee> tag is simple, and it is used with the content inside it. Here’s the basic structure:

<marquee>Scrolling text or image here</marquee>

The content inside the <marquee> tag can be any text or HTML element (like images, links, etc.).

Attributes of the marquee Tag

Although the <marquee> tag is obsolete, it did come with several attributes that controlled the appearance and behavior of the scrolling content.

  • direction: Specifies the direction in which the content will scroll.

    • left (default): Scrolls content from right to left.
    • right: Scrolls content from left to right.
    • up: Scrolls content from bottom to top.
    • down: Scrolls content from top to bottom.
<marquee direction="right">This text scrolls from left to right.</marquee>
  • scrollamount: Specifies the speed of the scroll. The value is a number, with a higher value making the text scroll faster.
<marquee scrollamount="10">Faster scrolling text</marquee>
  • scrolldelay: Specifies the delay between each jump in scrolling. The value is in milliseconds.
<marquee scrolldelay="100">Slower scrolling text with delay</marquee>

behavior: Defines the scrolling behavior.

  • scroll (default): Scrolls the content from one side to another.
  • slide: Makes the content slide once and stop.
  • alternate: Causes the content to bounce back and forth.
<marquee behavior="alternate">Bouncing text</marquee>

loop: Defines how many times the content should loop. By default, it loops infinitely.

<marquee loop="5">This text will scroll 5 times</marquee>

width and height: Specifies the width and height of the scrolling area.

<marquee width="50%" height="50">This is a limited width marquee</marquee>

Example of the <marquee> Tag in Use

Here’s an example that demonstrates different attributes of the <marquee> tag:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Marquee Example</title>
</head>
<body>
    <h1>HTML `<marquee>` Tag Example</h1>
    
    <marquee direction="right" scrollamount="10" scrolldelay="50" behavior="alternate" loop="3">
        This is scrolling text from left to right with bounce effect.
    </marquee>
    
    <marquee direction="up" scrollamount="5" scrolldelay="100" behavior="scroll" loop="10">
        Vertical scrolling text that scrolls up.
    </marquee>
    
    <marquee direction="down" width="50%" height="50">
        This is scrolling text down in a limited area.
    </marquee>
</body>
</html>

Why is the marquee Tag Deprecated?

  • Usability and Accessibility: The <marquee> tag can be distracting and confusing for users, especially those with disabilities or those who prefer a more stable, predictable web experience. It can also interfere with readability.

  • Poor Performance: The <marquee> tag is not optimized for modern web design. It can cause performance issues and create an inconsistent user experience across different devices and browsers.

  • Lack of Control: The <marquee> tag doesn’t offer fine control over the animation. CSS-based animations and JavaScript libraries provide more flexibility and better performance for modern web design.

Modern Alternatives to the marquee Tag

Instead of using the <marquee> tag, it’s recommended to use CSS animations or JavaScript for scroll effects. These methods give developers more control over the behavior and appearance of the animation.

CSS Scrolling Text Example

Here’s how to achieve a scrolling effect using CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Scrolling Text</title>
    <style>
        .scrolling-text {
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            box-sizing: border-box;
        }
        
        .scrolling-text p {
            display: inline-block;
            animation: scroll-left 10s linear infinite;
        }
        
        @keyframes scroll-left {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }
    </style>
</head>
<body>
    <div class="scrolling-text">
        <p>This is scrolling text achieved with CSS animations!</p>
    </div>
</body>
</html>

This CSS method provides more flexibility, such as adjusting speed, direction, and behavior without using outdated HTML tags.

Best Practices for Scrolling Text and Animations

Use CSS for Animations

Use CSS for Animations: CSS animations are preferred for creating scrolling text or any kind of moving content. They are more performant and customizable than the <marquee> tag.

Avoid Excessive Use of Scrolling Text: Scrolling text can be distracting to users, so it should be used sparingly. Overuse can hurt the user experience.

Make It Accessible: If you must use scrolling text, ensure it doesn’t interfere with accessibility. Avoid using animations that repeat or are too fast, and consider giving users the ability to pause or stop the animation.

Test Across Devices: Make sure your scrolling content works well across devices, especially mobile devices where the <marquee> tag may not function properly.

HTML Marquee

Quiz: Test Your Knowledge of the HTML <marquee> Tag