HTML <marquee> Tag

Last Updated : 11 Jul, 2025

The <marquee> tag in HTML creates a scrolling text or image effect within a webpage. It allows content to move horizontally or vertically across the screen, providing a simple way to add dynamic movement to elements. Although this tag is deprecated in HTML5, it is still useful to understand its functionality for legacy projects.

Note: This tag is deprecated from HTML5

Syntax

<marquee>
     <!-- contents -->
</marquee>

Attributes of <marquee>

The attributes of the <marquee> tag allow customization of the scrolling effect. They control aspects like direction, speed, size, and spacing of the content within the marquee.

Attributes	Values	Description
bgcolor	Color Name	Define the background color of the marquee.
direction	Top, Down, Left, Right	Define the direction of scrolling the content
loop	Number	Specifies how many times content moves. The default value is infinite.
height	px or %	Define the height of marquee
width	px or %	Define the width of marquee
hspace	px	Specify horizontal space around marquee
vspace	px	Specify vertical space around marquee

Methods for <marquee>

Methods for the <marquee> tag allow you to control the scrolling behavior. These methods enable you to start or stop the scrolling effect programmatically.

Method	Description
start()	Starts the scrolling of the <marquee> tag.
stop()	Stops the scrolling of the <marquee> tag.

Event Handlers

Event handlers in the <marquee> tag allow you to execute actions when certain scrolling events occur. They provide a way to trigger specific functions when scrolling starts, finishes, or bounces back.

Event Handler	Description
onbounce	Triggered when a scrolling <marquee> reaches the end (exclusive to 'alternate' behavior).
onfinish	Activates when the <marquee> completes the scrolling loops specified by the 'loop' attribute.
onstart	Fired at the initiation of scrolling for the HTML <marquee> tag.

Examples of HTML <marquee> Tag

Example 1: Right to Left Scrolling

In this example, we will see the implementation of the <marquee> tag with right-to-left scrolling.

html

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<head>
    <title>Marquee Tag</title>
<!--Driver Code Ends-->

    <style>
        .main {
            text-align: center;
        }

        .marq {
            padding-top: 30px;
            padding-bottom: 30px;
        }

        .geek1 {
            font-size: 36px;
            font-weight: bold;
            color: white;
            padding-bottom: 10px;
        }
    </style>
</head>

<body>
    <div class="main">
        <marquee class="marq" bgcolor="Green" 
                 direction="left" loop="">
            <div class="geek1">
                GeeksforGeeks
            </div>
            <div class="geek2">
                A computer science portal for geeks
            </div>
        </marquee>
    </div>

<!--Driver Code Starts-->
</body>

</html>
<!--Driver Code Ends-->

Output:

HTML-marquee-Tag-2 — HTML Tag Example Output

Example 2: Bottom to Top Scrolling

This example demonstrates the <marquee> tag with bottom-to-top scrolling.

html

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<!--Driver Code Ends-->

<head>
    <title>Marquee Tag</title>
    <style>
        .main {
            text-align: center;
            font-family: "Times New Roman";
        }

        .marq {
            padding-top: 30px;
            padding-bottom: 30px;
        }

        .geek1 {
            font-size: 36px;
            font-weight: bold;
            color: white;
            text-align: center;
        }

        .geek2 {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="main">
        <marquee class="marq" bgcolor="Green" 
                 direction="up" loop="">
            <div class="geek1">
                GeeksforGeeks
            </div>
            <div class="geek2">
                A computer science portal for geeks
            </div>
        </marquee>
    </div>

<!--Driver Code Starts-->
</body>

</html>

<!--Driver Code Ends-->

Output:

Example 3: Up to Bottom Scrolling

In this example, we will see implementation of above tag from up to bottom.

html

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<!--Driver Code Ends-->

<head>
    <title>Marquee Tag</title>
    <style>
        .main {
            text-align: center;
            font-family: "Times New Roman";
        }

        .marq {
            padding-top: 30px;
            padding-bottom: 30px;
        }

        .geek1 {
            font-size: 36px;
            font-weight: bold;
            color: white;
            text-align: center;
        }

        .geek2 {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="main">
        <marquee class="marq" bgcolor="Green" 
                 direction="down" loop="">
            <div class="geek1">
                GeeksforGeeks
            </div>
            <div class="geek2">
                A computer science portal for geeks
            </div>
        </marquee>
    </div>

<!--Driver Code Starts-->
</body>

</html>

<!--Driver Code Ends-->

Output:

HTML Introduction

Naman_Garg

Improve

Article Tags :

HTML <marquee> Tag

Syntax

Attributes of <marquee>

Methods for <marquee>

Event Handlers

Examples of HTML <marquee> Tag

Example 1: Right to Left Scrolling

Example 2: Bottom to Top Scrolling

Example 3: Up to Bottom Scrolling

Similar Reads

Basics

HTML Structure & Elements

HTML List

HTML Visuals & Media

HTML Layout & Design

HTML Projects& Advanced Topics

HTML Tutorial References

Thank You!

What kind of Experience do you want to share?