HTML Marquee Tag

Marquee is one of the important tag 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:

AttributeDescription
widthprovides the width or breadth of a marquee. For example width="10" or width="20%"
heightprovides the height or length of a marquee. For example height="20" or height="30%"
directionprovides 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
scrolldelayprovides a feature whose value will be used for delaying among each jump.
scrollamountprovides a value for speeding the marquee feature
behaviorprovides the scrolling type in a marquee. That scrolling can be like: sliding, scrolling or alternate
loopprovides how many times the marquee will loop
bgcolorprovides a background color where the value will be either the name of the color or the hexadecimal color-code.
vspaceprovides a vertical space and its value can be like: vspace="20" or vspace="30%"
hspaceprovides 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 in the upper direction.
</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 in the upper direction.
</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 in the upper direction.
</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.


Here are few other related articles for you to read:

Scroll Back to Top