How to set the direction & behavior in the <marquee> tag in HTML ?

Last Updated : 24 May, 2023

The <marquee> tag in HTML is used to create scrolling text or images on a webpage. It scrolls either from horizontally left to right or right to left, vertically from top to bottom, or bottom to top.

In this article, we will set the direction and behavior of the marquee tag in HTML

Syntax: The marquee element comes in pairs. It means that the tag has opening and closing elements.

<marquee>
    ...
</marquee>

Attributes:

bgcolor: Define the background color of the marquee.
direction: Define the direction of scrolling the content. It has four values i.e. Top, Down, Left, and Right.
loop: Specifies how many times content moves. It takes a Number type value. The default value is infinite.
height: Define the height of the marquee. We can give value in either pixels or percentages.
width: Define the width of the marquee. We can give value in either pixels or percentages.
hspace: Specify horizontal space around the marquee. It takes a pixel type value.
vspace: Specify vertical space around the marquee. It takes a pixel type value.

Example: This is an example using the marquee tag.

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:

behavior attribute: The Marquee behavior attribute in HTML is used to set the behavior of scrolling. The default value is scroll.

Syntax:

<marquee behavior = attribute_value >

Attribute value:

Scroll
Slide
Alternate

Example: In this example, we will use the behavior attribute.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Marquee Tag</title>
    <style>
        .main {
            text-align: center;
        }
 
        .marq {
            padding-top: 30px;
            padding-bottom: 30px;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green; text-align:center;">
      GeeksforGeeks
    </h1>
    <div class="main">
        <marquee class="marq"
                 bgcolor="Green"
                 direction="left"
                 behavior=scroll
                 loop="">
            Scroll
        </marquee>
        <marquee class="marq"
                 bgcolor="Green"
                 behavior=alternate
                 direction="left"
                 loop="">
            Alternate
        </marquee>
    </div>
</body>
 
</html>

Output:

direction attribute: The Marquee direction attribute in HTML is used to set the direction of scrolling. The default direction of scrolling is left. Possible values are up, down, left, and right.

Syntax:

<marquee direction= attribute_value>

Attribute value:

up
down
left
right

Example: In this example, we will use the direction attribute.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Marquee Tag</title>
    <style>
        .main {
            text-align: center;
        }
 
        .marq {
            padding-top: 30px;
            padding-bottom: 30px;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green; text-align:center;">
        GeeksforGeeks
    </h1>
    <div class="main">
        <marquee class="marq"
                 bgcolor="Green"
                 direction="left"
                 loop="">
            Left
        </marquee>
        <marquee class="marq"
                 bgcolor="Green"
                 direction="right"
                 loop="">
            Right
        </marquee>
    </div>
</body>
 
</html>