HTML Marquee Tag

The HTML Marquee Tag is a classic HTML element used to create scrolling text or images within a web page. Though deprecated in HTML5, it is still widely recognized and sometimes used for simple effects or legacy projects. In this guide, we will explore the marquee tag, its attributes, examples, and practical use cases for beginners to intermediate learners.

What is the HTML Marquee Tag?

The marquee tag in HTML allows you to make text or images move horizontally or vertically across a webpage. It is commonly referred to as scrolling text HTML.

Basic Syntax of HTML Marquee

📄
<marquee>Your scrolling text here</marquee>

This simple code will create text that scrolls from right to left across the screen by default.

HTML Marquee Attributes

The marquee tag supports several attributes to control the scrolling behavior. Here are the most important ones:

Examples of HTML Marquee

Simple Scrolling Text

📄
<marquee>Welcome to our website!</marquee>

Scrolling Text with Attributes

📄
<marquee direction="right" scrollamount="5" behavior="alternate" bgcolor="#e0e0e0">
This is a sample scrolling text with attributes!
</marquee>

Scrolling Images Example

📄
<marquee direction="left" scrollamount="8">
    <img src="image1.jpg" alt="Image 1" width="100">
    <img src="image2.jpg" alt="Image 2" width="100">
</marquee>

 Use Cases of HTML Marquee

• Displaying breaking news or announcements.
• Highlighting promotional offers on e-commerce sites.
• Scrolling quotes or motivational messages.
• Displaying stock prices or real-time updates.

Advantages and Disadvantages of Marquee Tag

Advantages

• Easy to implement for scrolling text or images.
• Can be customized with multiple attributes.
• Lightweight and requires no JavaScript for simple effects.

Disadvantages

• Deprecated in HTML5 and not recommended for modern websites.
• Limited styling options compared to CSS animations.
• May affect website accessibility if overused.

Alternatives to HTML Marquee

For modern websites, it’s recommended to use CSS animations or JavaScript for scrolling effects:

Alternatives to HTML Marquee Tag

The HTML Marquee tag is deprecated in HTML5. To create scrolling text or images on modern websites, we can use CSS animations or JavaScript-based solutions. Below are practical examples and alternatives.

1. Scrolling Text Using CSS Animation

This method uses @keyframes in CSS to move text from right to left infinitely.

📄
<div class="scrolling-text">This text scrolls smoothly using CSS!</div>

The CSS for this example:

📄
.scrolling-text {
    display: inline-block;
    white-space: nowrap;
    animation: scroll-left 10s linear infinite;
}

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

2. Vertical Scrolling Text Using CSS

You can also scroll text vertically using CSS animations:

📄
<div class="vertical-scroll">
    <div>
        Line 1: Welcome to our site!<br>
        Line 2: Check latest news.<br>
        Line 3: Enjoy scrolling text.</div>
</div>

The CSS:

📄
.vertical-scroll {
    height: 100px;
    overflow: hidden;
    position: relative;
}
.vertical-scroll div {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: scroll-up 5s linear infinite;
}
@keyframes scroll-up {
    0% { top: 100%; }
    100% { top: -100%; }
}

3. JavaScript Scrolling Text

If you need dynamic control or more complex scrolling, JavaScript is a great alternative:

📄
<div id="js-marquee">Scrolling text using JavaScript!</div>

<script>
const marquee = document.getElementById('js-marquee');
let position = 100;

function scrollText() {
    position -= 1;
    if (position < -marquee.offsetWidth) {
        position = window.innerWidth;
    }
    marquee.style.transform = 'translateX(' + position + 'px)';
    requestAnimationFrame(scrollText);
}

scrollText();
</script>

<style>
#js-marquee {
    white-space: nowrap;
    position: relative;
    display: inline-block;
}
</style>

Advantages of CSS/JS Alternatives

• Fully compliant with HTML5 standards
• Customizable animations, speeds, and directions
• Better accessibility and responsive behavior
• Works across modern browsers consistently

While the HTML marquee tag is deprecated, using CSS animations or JavaScript provides a modern, flexible, and accessible solution for scrolling text and images. CSS-only scrolling works well for simple effects, while JavaScript allows for dynamic, interactive control. Choosing the right alternative depends on the complexity of the effect and browser compatibility requirements

The HTML Marquee Tag is a simple way to create scrolling text and images on a web page. While it is deprecated in HTML5, understanding its attributes and examples is useful for legacy projects or learning the fundamentals of web design. For modern websites, CSS animations or JavaScript-based scrolling effects are preferred for better accessibility, customization, and responsiveness.

Frequently Asked Questions (FAQs)

1. Is the marquee tag supported in HTML5?

No, the marquee tag is deprecated in HTML5. While most browsers still support it, it is recommended to use CSS or JavaScript alternatives for modern web design.

2. Can I scroll images using the marquee tag?

Yes, you can include images inside a marquee tag, just like text. Example:

📄
<marquee><img src="image.jpg"></marquee>

3. How do I change the scrolling speed?

You can control the speed using the scrollamount attribute. Higher values make the text scroll faster. Example:

📄
<marquee scrollamount="10">Fast scrolling text</marquee>

4. Can marquee text scroll vertically?

Yes, by using the direction attribute set to "up" or "down". Example:

📄
<marquee direction="up">Scrolling up</marquee>

5. What are modern alternatives to the marquee tag?

Modern alternatives include CSS animations with @keyframes or JavaScript-based scrolling libraries. These methods are more flexible, accessible, and compatible with HTML5 standards.