HTML Marquee Tag

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 learn 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 that 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 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 hspace="20" or hspace="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 the right.
</marquee>

Output:

This is a sample scrolling text that has scrolls texts to the right.

Scroll Right to Left

Example:

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

Output:

This is a sample scrolling text that has scrolls texts to the 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.
Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram