The Marquee HTML element is an unconventional tag in HTML that is employed to scroll an image or text either horizontally or vertically.
Put plainly, this feature enables automatic scrolling of images or text in various directions such as up, down, left, or right.
The marquee tag made its debut in initial releases of Microsoft's Internet Explorer. It was often contrasted with Netscape's blink element.
Marquee HTML Example
<marquee>This is an example of html marquee </marquee>
Output:
Supporting Browsers
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<marquee> |
Yes | Yes | Yes | Yes | Yes |
HTML Marquee Attributes
The marquee element includes various attributes that are utilized to manage and customize the display of the marquee.
| Attribute | Description |
|---|---|
| behavior | It facilitates user to set the behavior of the marquee to one of the three different types: scroll, slide and alternate. |
| direction | defines direction for scrolling content. It may be left, right, up and down. |
| width | defines width of marquee in pixels or %. |
| height | defines height of marquee in pixels or %. |
| hspace | defines horizontal space in pixels around the marquee. |
| vspace | defines vertical space in pixels around the marquee. |
| scrolldelay | defines scroll delay in seconds. |
| scrollamount | defines scroll amount in number. |
loop |
defines loop for marquee content in number. |
| bgcolor | defines background color. It is nowdeprecated. |
HTML Scroll Marquee
It is an inherent attribute that automatically scrolls text horizontally, restarting from the right once it reaches the left end. Once the scrolling loop finishes, the text vanishes.
<marquee width="100%" behavior="scroll" bgcolor="pink">
This is an example of a scroll marquee...
</marquee>
Output:
HTML Slide Marquee
In a slide marquee, the entirety of the content set to scroll will move across the marquee's full length before halting at the end to exhibit the content consistently.
<marquee width="100%" behavior="slide" bgcolor="pink">
This is an example of a slide marquee...
</marquee>
Output:
HTML Alternate Marquee
It moves the text horizontally, shifting from right to left and then reversing the direction to go from left to right.
<marquee width="100%" behavior="alternate" bgcolor="pink">
This is an example of a alternate marquee...
</marquee>
Output:
Direction in HTML marquee
This functionality alters the scrolling text's direction. For instance, consider a marquee scrolling to the right. The scrolling direction options include left, right, upwards, and downwards.
<marquee width="100%" direction="right">
This is an example of a right direction marquee...
</marquee>
Output:
Nested marquee example
<marquee width="400px" height="100px" behavior="alternate" style="border:2px solid red">
<marquee behavior="alternate">
Nested marquee...
</marquee>
</marquee>
Disadvantages HTML marquee
1) Marquee can be disruptive as people tend to be drawn to motion, and the continuous movement of marquee text can be distracting.
Since the Marquee text is in motion, it can be more challenging to interact with compared to stationary text, especially based on the scrolling speed.
3) It is a non-standard HTML element.
It unnecessarily grabs the user's focus and complicates the readability of the text.