Marquee Tag in HTML

The <marquee> tag in HTML makes text or images move across the screen. It was used a lot in old websites to make things scroll or slide. Now, it is deprecated in HTML5 and is not used much. By the end of this blog, you will understand the purpose and get to use the <marquee> tag in HTML with simple examples.

Table of Contents:

• Understanding the <marquee> Tag
  • Syntax of the <marquee> Tag
• Common Attributes of the <marquee> Tag
• Examples of <marquee> Tag
• Limitations and Deprecated Status
• Modern Alternative to the <marquee> Tag
• Conclusion

Understanding the <marquee> Tag

On older websites, you must have seen text sliding right across the screen. That is the function of the <marquee> tag in HTML. This was once a popular element in the language that would let users create scrolling text or images automatically.

Marquee Meaning

In terms of web development, marquee refers to the moving or scrolling effect of text or images. This was originally introduced by the Internet Explorer browser. The tag, however, was never officially standardized by the W3C.

Syntax of the <marquee> Tag

The basic syntax looks like this:

<marquee>Scrolling text goes here</marquee>

You can also add attributes to control how the text moves. For example:

Output:

Explanation: Here, the animation type is defined by the behavior “scroll”. The scroll direction is controlled by the direction “left”. The marquee tag in HTML is deprecated and should not be used in mordern websites, despite being entertaining and eye-catching. It cannot be consistently styled, is inaccessible, and performs poorly on various devices.

Common Parts:

• <marquee>: Opening tag
• </marquee>: Closing tag
• Text or image inside: This is what moves
• Attributes: Optional settings to change direction, speed, and style

Master Web Development

Learn to Build Stunning Websites and Apps from Scratch

Explore Program

Common Attributes of the <marquee> Tag

Let’s discuss some of the common attributes of the <marquee> tag in HTML.

1. direction

This controls the direction in which the text moves.

Values: left, right, up, down

Example:

<marquee direction="right">Moving Right</marquee>

2. scrollamount

This sets the speed of the scrolling text. Higher numbers mean faster speed.

Example:

<marquee scrollamount="10">Fast Scroll</marquee>

3. behavior

This decides how the text moves.

Values:

• scroll (default): Moves and restarts
• slide: Moves once, then stops
• alternate: Bounces back and forth

Example:

<marquee behavior="alternate">Bouncing Text</marquee>

4. loop

This controls how many times the marquee scrolls.

Value: A number or infinity.

Example:

<marquee loop="3">Scrolls 3 Times</marquee>

5. bgcolor, height, width

These control the background color and size of the marquee box.

Example:

<marquee bgcolor="yellow" height="50" width="300">Colored Marquee</marquee>

Examples of <marquee> Tag

Let’s see some examples to use the <marquee> tag in HTML in different ways.

1. Basic Scrolling Text

Output:

2. Text Scrolling Right

Output:

3. Bouncing Text

Output:

4. Fast Scrolling Text with Background

Output:

Limitations and Deprecated Status

• The <marquee> tag is deprecated, which means it is no longer supported in modern HTML standards.
• It does not work properly on all browsers, especially mobile ones.
• It does not follow accessibility best practices (for example, it makes it hard to read for readers).
• Web developers are advised not to use it in new websites.

Modern Alternative to the <marquee> Tag

Instead of the <marquee> tag, you can use CSS animations for moving text or images. It is more flexible and works well across all devices.

Example using CSS animation:

Output:

Conclusion

So far in this blog, we have learned how to use the <marquee> tag in HTML. This was once a popular element in HTML that would let users create scrolling text or images automatically. Today, CSS animations are a better and more powerful way to create scrolling effects. Even though it is no longer used much, learning about it is still helpful to understand older HTML code.

You can also check HTML Interview Questions and our Web Development course to learn more about HTML5.

Marquee Tag in HTML – FAQs