HTML <marquee> Tag
It is a non-standard HTML element. To scroll an image or text the HTML <marquee> tag is used. The scroll can be either horizontally or vertically, thus allowing the image or text to be scrolled up or down, or left or right automatically. With a comparison to Netscape’s blink element, this tag was introduced in Microsoft’s Internet Explorer earlier versions.
Example:
<!DOCTYPE html> <html> <body> <marquee>Hello World!!</marquee> </body> </html>
Explanation:
In the above example, we have used the HTML <marquee> tag to scroll the text horizontally.
Supporting Browsers:
Chrome, IE, Firefox, Opera, and Safari.
Tag Specific Attributes:
| Attribute | Uses |
| behavior | To set the behavior of the marquee to either the scroll, slide, or alternate types. |
| direction | To specify the direction (left, right, up, or down) for scrolling content. |
| width | To specify the width of the marquee in pixels or |
| height | To specify the height of the marquee in pixels or |
| hspace | To specify the horizontal space in pixels around the marquee. |
| vspace | To specify the vertical space in pixels around the marquee. |
| scrolldelay | To specify the scroll delay in seconds. |
| scrollamount | To specify the scroll amount in number. |
| loop | To specify the loop for marquee content in number. |
| bgcolor | To specify the background color, but is deprecated now. |
HTML Scroll Marquee:
By default, the scroll property exists with the HTML <marquee> tag. It allows the text to be scrolled from right to left. The scroll when reached the end of the left side, restarts at the right side of the marquee. The text then disappears, when the loop completes.
Example:
<!DOCTYPE html> <html> <body> <marquee width="50%" behavior="scroll" bgcolor="crimson"> Hello World!! </marquee> </body> </html>
Explanation:
In the above example, we have used the HTML Scroll Marquee, to scroll the text from right to left.
HTML Slide Marquee:
To scroll the contents to slide the entire length of the marquee, the HTML Slide Marquee can be used. To display the content permanently, it stops at the end.
Example:
<!DOCTYPE html> <html> <body> <marquee width="50%" behavior="slide" bgcolor="crimson"> Hello World!! </marquee> </body> </html>
Explanation:
In the above example, we have used the HTML Slide Marquee, to scroll the text to slide the entire marquee length, but to stop at the end.
HTML Alternate Marquee:
To scroll the content from right to left and then to go back from left to right, the HTML Alternate Marquee is used.
Example:
<!DOCTYPE html> <html> <body> <marquee width="50%" behavior="alternate" bgcolor="crimson"> Hello World!! </marquee> </body> </html>
Explanation:
In the above example, we have used the HTML Alternate Marquee, to scroll the text from right to left and then from left to right.
Direction in HTML marquee:
We can also change the direction of the scrolling text, where the direction can be left, right, up, and down.
Example:
<!DOCTYPE html> <html> <body> <marquee width="50%" direction="right" bgcolor="crimson"> Hello World!! </marquee> </body> </html>
Explanation:
In the above example, we have used the direction attribute of the HTML Marquee, to scroll the text in the specified direction.
Nested marquee:
Example:
<!DOCTYPE html> <html> <body> <marquee width="300px" height="50px" behavior="alternate" style="border:10px solid crimson"> <marquee behavior="slide" bgcolor="yellow"> HELLO WORLD!! </marquee> </marquee> </body> </html>
Explanation:
In the above example, we have used the HTML <marquee> tag inside the HTML <marquee> tag to create an HTML-nested marquee.
Disadvantages of HTML marquee:
- Because of the constant attraction towards movement and marquee text constantly, the marquee can be distracting sometimes.
- It is also very difficult to click the static text since Marquee text moves.
- The text is harder to read.