Open In App
Related Articles

HTML <marquee> Tag

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The <marquee> tag in HTML is used to create scrolling text or images on a webpage. It can scroll horizontally from left to right or right to left, and vertically from top to bottom or bottom to top. It includes attributes like direction to specify whether the content moves left, right, up, or down.

Note: This tag is deprecated from HTML5.

Syntax 

<marquee>

<--- contents --->

</marquee>

Attributes :

AttributesValuesDescription
bgcolorColor NameDefine the background color of the marquee.
directionTop, Down, Left, RightDefine the direction of scrolling the content
loopNumberSpecifies how many times content moves. The default value is infinite.
heightpx or %Define the height of marquee
widthpx or %Define the width of marquee
hspacepxSpecify horizontal space around marquee
vspacepxSpecify vertical space around marquee

Methods : 

MethodDescription
start()Used to start the scrolling of the <marquee> tag.
stop()Used to stop the scrolling of the <marquee> tag.

Event Handlers :

Event HandlerDescription
onbounceTriggered when a scrolling <marquee> reaches the end, exclusive to ‘alternate’ behavior.
onfinishActivates when the <marquee> completes scrolling loops specified by the ‘loop’ attribute.
onstartFired at the initiation of scrolling for the HTML <marquee> tag.

Example 1: In this example, we will see implementation of above tag with right to left.

html

<!DOCTYPE html>
<html>
  
<head>
    <title>Marquee Tag</title>
    <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>
</body>
  
</html>

                    

Output: 

qa-(1)
Example 2: In this example, we will see implementation of above tag with another example from bottom to up.

html

<!DOCTYPE html>
<html>
  
<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>
</body>
  
</html>

                    

Output: 

as

output


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

html

<!DOCTYPE html>
<html>
  
<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>
</body>
  
</html>

                    

Output: 

za

Output

Supported Browsers

  • Google Chrome 1
  • Edge 12
  • Firefox 65
  • Opera 7.2
  • Safari 1.2
     


Last Updated : 28 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads