Last Updated on April 26, 2023 by Roshan Parihar
HTML Marquee is the way of display scrolling text.
This scrolling text can scroll horizontally as well as vertically. Marquee text can be used in the websites to show scrolling text like news and events. Marquee text can be displayed in HTML pages by using <marquee>.
Syntax
1 |
<marquee>Enter marquee text here</marquee> |
1 |
<marquee>This is marquee, scrolling text.</marquee> |
Output
List of HTML marquee tag attributes
Sr. No. | HTML Marquee Attributes | Description |
---|---|---|
1 | direction | Used to give direction to the scrolling text. The value of this is left, right, top, up and down. |
2 | width | Used to give the width of the marquee. |
3 | height | Used to give a height for marquee element. |
4 | behavior | Used to give the behavior of the marquee text. The value of this are scroll, slide and alternate. |
5 | scrollamount | Used to give amount in numbers. This controls of speed of the marquee text. Higher the values, higher is the speed of the marquee text. The value is in milliseconds. |
6 | scrolldelay | Used to give a delay in number. This controls the delay of content to display again from the coming end. The value is in milliseconds. |
7 | bgcolor | Used to give background color to the marquee text. |
8 | vspace | Used to set the vertical space between the marquee and the content top and bottom. |
9 | hspace | Used to set the horizontal space between the marquee and the content before and after. |
10 | loop | Used to define how many times the marquee will appear in the loop. loop=”2″ means marquee will appear two times. loop=”infinite” means marquee will appear continuous. |
Marquee Direction Attribute
Direction attributes used to give the direction to the marquee content. The directions are left, right, up and down.
Right direction marquee
1 |
<marquee direction="right">This is a right direction marquee. </marquee> |
Output
Left direction marquee
1 |
<marquee direction="left">This is a left direction marquee.</marquee> |
Output
Up direction marquee
1 |
<marquee direction="up">This is up direction marquee.</marquee> |
Output
Down direction marquee
1 |
<marquee direction="down">This is down direction marquee.</marquee> |
Output
HTML Marquee width and height Attribute
Width and height attributes used to give the size of the marquee. We can define the width and height in pixel numbers as well as percentage.
1 2 3 4 |
<marquee direction="up" width="50%" height="100"> <p>This is first text marquee.</p> <p>This is a second text marquee.</p> </marquee> |
Output
Marquee behavior Attribute
Marquee behavior attribute is used to define the behavior of the marquee. The values for behavior or scroll, slide, and alternate.
Example with scroll behavior
1 |
<marquee direction="left" behavior="scroll">This is scroll text marquee.</marquee> |
Output
Slide behavior marquee
1 |
<marquee direction="left" behavior="slide">This is the slide text marquee.</marquee> |
Output
Alternate behavior marquee
1 |
<marquee behavior="alternate">This is an alternate text marquee. </marquee> |
Output
Marquee scrollamount Attribute
Scrollamount attribute used to give the scroll speed to the marquee content. The value will be in millisecond.
1 2 |
<marquee scrollamount="10">This is marquee text with scrollamount.</marquee> <marquee scrollamount="30">This is marquee text with scrollamount.</marquee> |
Output
Marquee scrolldelay Attribute
Scrolldelay attribute given delay in number. This controls the delay of content to display again from the coming end. The value is in milliseconds.
1 2 |
<marquee scrolldelay="10">This is marquee text with scrolldelay.</marquee> <marquee scrolldelay="100">This is marquee text with scrolldelay.</marquee> |
Output
Marquee vspace Attribute
vspace attribute Used to set the vertical space between the marquee and the container top and bottom.
1 |
<marquee vspace=10 bgcolor="yellow" width="50%">This is marquee text with vspace.</marquee>outer text |
Output
Marquee hspace Attribute
hspace attribute Used to set the horizontal space between the marquee and the content before and after.
1 |
<marquee hspace=10 bgcolor="yellow" width="50%">This is marquee text with hspace.</marquee>outer text |
Output
Marquee loop Attribute
Used to define how many times the marquee will appear in the loop. loop=”2″ means marquee will appear two times. loop=”infinite” means marquee will appear continuous.
1 |
<marquee loop="2">This is marquee text with loop.</marquee> |
Output
Resources and References
1. W3C Specification.
2. HTML living standard
3. W3C project using Github