HTML Marquee Tag: Syntax, Attributes, and Examples

The <marquee> tag in HTML is used to create scrolling text or images on a webpage. While it is deprecated in HTML5, it is still widely used for simple text animations. This guide will cover the syntax, attributes, and examples of using the HTML marquee tag.

What is the HTML Marquee Tag?

The <marquee>  tag allows text or images to move horizontally or vertically across a webpage. It is often used to grab user attention, though CSS and JavaScript alternatives are now preferred.

Syntax of the Marquee Tag

The basic syntax of the <marquee>  tag is:

<marquee>Scrolling Text</marquee>

This will create a simple scrolling effect where the text moves from right to left.

Attributes of the Marquee Tag

The <marquee>  tag supports several attributes to control its behavior:

• behavior: Specifies the scrolling type (scroll, slide, or alternate).
• direction: Defines the scrolling direction (left, right, up, or down).
• scrollamount: Sets the speed of the scrolling text.
• scrolldelay: Adds a delay between each scroll movement.
• loop: Defines how many times the text should scroll.
• bgcolor: Sets the background color.

Examples of Using the Marquee Tag

1. Basic Scrolling Text

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

2. Changing Scroll Direction

<marquee direction="right">Scrolling to the right!</marquee>

3. Adjusting Scroll Speed

<marquee scrollamount="10">Faster scrolling text.</marquee>

4. Adding Background Color

<marquee bgcolor="yellow">Text with a background color.</marquee>

5. Looping the Scroll

<marquee loop="3">This text will scroll three times.</marquee>

Alternatives to the Marquee Tag

Since the <marquee> tag is deprecated, CSS and JavaScript are recommended for creating scrolling effects:

Using CSS for Scrolling Text

<style>
@keyframes marquee {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}
.marquee {
  display: inline-block;
  white-space: nowrap;
  animation: marquee 5s linear infinite;
}
</style>

<div class="marquee">This is a scrolling text using CSS.</div>

Conclusion

The <marquee> tag provides an easy way to create scrolling text in HTML, but it is deprecated in HTML5. For modern web development, CSS animations or JavaScript-based solutions are recommended. If you are working on older projects, understanding the marquee tag can still be useful.

For more HTML tutorials and web development tips, visit LetsUpdateSkills and keep enhancing your coding skills!