Marquee is one of the important tags introduced in HTML to support such scrollable texts and images within a web page. In this tutorial, you will be learning about the Marquee tag and its different attributes for developing a well-groomed static website.

The Marquee Tag

The <marquee> tag is a container tag of HTML is implemented for creating scrollable text or images within a web page from either left to right or vice versa, or top to bottom or vice versa. But this tag has been deprecated in the new version of HTML, i.e., HTML 5.

The different attributes of <marquee> tag are:

Attribute Description
width provides the width or breadth of a marquee. For example width="10" or width="20%"
height provides the height or length of a marquee. For example height="20" or height="30%"
direction provides the direction or way in which your marquee will allow you to scroll. The value of this attribute can be: left, right, up or down
scrolldelay provides a feature whose value will be used for delaying among each jump.
scrollamount provides value for speeding the marquee feature
behavior provides the scrolling type in a marquee. That scrolling can be like sliding, scrolling or alternate
loop provides how many times the marquee will loop
bgcolor provides a background color where the value will be either the name of the color or the hexadecimal color-code.
vspace provides a vertical space and its value can be like: vspace="20" or vspace="30%"
hspace provides a horizontal space and its value can be like: vspace="20" or vspace="30%"

Here's are some example of how to use <marquee> tag in HTML:

Scroll Up

Example:
<marquee width="60%" direction="up" height="100px">
This is a sample scrolling text that has scrolls in the upper direction.
</marquee>
Output:
This is a sample scrolling text that has scrolls in the upper direction.

Scroll Down

Example:
<marquee width="60%" direction="down" height="100px">
This is a sample scrolling text that has scrolls texts to down.
</marquee>
Output:
This is a sample scrolling text that has scrolls texts to down.

Scroll Left to Right

Example:
<marquee width="60%" direction="right" height="100px">
This is a sample scrolling text that has scrolls texts to right.
</marquee>
Output:
This is a sample scrolling text that has scrolls texts to right.

Scroll Right to Left

Example:
<marquee width="60%" direction="left" height="100px">
This is a sample scrolling text that has scrolls texts to left.
</marquee>
Output:
This is a sample scrolling text that has scrolls texts to left.

Scrolling Speed

Marquee speed can be changed using the "scrollmount" attribute. For example, if you are using scrollmount = "1" then it sets the marque to scroll very slowly, and as you increase the "scrollmount," the scrolling speed will also increase.

Example:
<marquee behavior="scroll" direction="up" scrollamount="1">Slow Scrolling</marquee>
<marquee behavior="scroll" direction="right" scrollamount="12">Little Fast Scrolling</marquee>
<marquee behavior="scroll" direction="left" scrollamount="20">Fast Scrolling</marquee>
<marquee behavior="scroll" direction="right" scrollamount="50">Very Fast Scrolling</marquee>
Output:
Slow Scrolling Little Fast Scrolling Fast Scrolling Very Fast Scrolling

Marquee can also be implemented using CSS. Read the CSS Marquee chapter to learn more about it.

Blinking Text Within Marquee

<!DOCTYPE html>
<html>
<head>
    <title>Example of a blinking text using CSS within a marquee</title>
    <style>
        .blink {
            animation: blinker 1.5s linear infinite;
            color: red;
            font-family: sans-serif;
        }
        @keyframes blinker {
            50% {
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <marquee class="blink">This is an example of blinking text using CSS within a marquee.</marquee>
</body>
</html>
Output:
This is an example of blinking text using CSS within a marquee.