HTML Marquee Tag - Why you should avoid it?
HTML <marquee> tag is used to automatically scroll an image or text horizontally or vertically on a webpage. In simple words, it scrolls the image or text up, down, left or right automatically.
By default, without any specific attribute, content within the <marquee> tag will scroll from right to left. The marquee tag has been deprecated in HTML5 and should no longer be used. You should use CSS instead to create a similar scrolling effect. We can now use the following CSS3 properties like marquee-play-count, marquee-style, overflow-style, marquee-direction and marquee-speed.
Look at the example below, in which the default scrolling effect is running.
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Marquee Tag </title>
</head>
<body>
<marquee> This is an example of HTML marquee. </marquee>
</body>
</html>
Output
Marquee Scroll Property
Marquee Scroll is a default property. During scroll, the text floats from right to left and restarts from the right side of the marquee when it reaches to the end on the left side of the screen.
It is used as a value of behavior attribute, like, behavior="scroll". You can also change the direction of the Scroll by using direction attribute.
As it is a default property, there is no need to specify this within Marquee tag.
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Scroll Attribute </title>
</head>
<body>
<marquee width="100%" behavior="scroll" direction="up">
This is an example of a scroll marquee Up Side Direction...
</marquee>
</body>
</html>
Output
Marquee Slide Property
Marquee Slide property scrolls the text from right to left and at the end of the screen, it stops movement. You can specify the direction attribute to change the direction of the marquee like, direction=up/down/left/right.
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Marquee Slide Attribute </title>
</head>
<body>
<marquee width="100%" behavior="slide">
This is an example of a slide marquee...
</marquee>
</body>
</html>
Output
Marquee Alternate Property
Marquee Alternate Property scrolls the text from right to left and then goes back from left to right. You can only set direction as left or right on this property.
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Marquee Alternate Attribute </title>
</head>
<body>
<marquee width="100%" behavior="alternate">
This is an example of a alternate marquee...
</marquee>
</body>
</html>
Output
Marquee 'Direction' Attribute
The 'Direction' Attribute is used to change the direction of scrolling text inside the marquee tag. The direction of text or image data inside marquee tag can be left, right, up and down.
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Marquee Direction Attribute </title>
</head>
<body>
<marquee width="100%" behavior="scroll" direction="up">
This is an example of a Up side direction marquee...
</marquee>
</body>
</html>
Output
HTML Marquee tag Attributes
| Attribute | Description |
|---|---|
| behavior | The behavior of how the text scrolls... It sets the behavior of the marquee to one of the three different types: scroll, slide, and alternate. |
| bgcolor | Change background color. |
| direction | It defines the direction for scrolling content, like left/right/up/down. |
| height | It defines the height of the marquee in pixels or '%'. |
| width | It defines the width of marquee in pixels or '%'. |
| hspace | It defines horizontal space in pixels around the marquee. |
| vspace | It defines vertical space in pixels around the marquee. |
| scrolldelay | The delay in milliseconds between scrolling. The default value is 85 if the scrolldelay is not specified. If a value lower than 60 is provided, the truespeed attribute must also be used |
| scrollamount | The amount of scrolling (in pixels) for each interval. The default value is 6 if the scrollamount is not specified. |
| truespeed | Use this attribute to indicate that a scrolldelay value of 60 is allowed. Otherwise, the scrolldelay value will be rounded up to 60. |
| loop | It defines the number of times that the text will scroll. The default value is -1 which means that the marquee will loop continuously. |
| bgcolor | It defines background color. It is now depreciated. |
HTML Marquee Methods
The marquee tag has the following methods:
| Methods | Description |
|---|---|
| start() | It starts the text scrolling within the marquee. |
| stop() | It stops the text from scrolling within the marquee. |
Marquee Event Handlers
The <marquee> tag has the following event handlers:
| Event Handler | Description |
|---|---|
| onbounce | The onbounce event fires when the behavior attribute is set to alternate and the text has reached the edge of the marquee. |
| onfinish | The onfinish event fires when the loop attribute is set to a value higher than 0 and the marquee has finished looping the specified number of times. |
| onstart | This event fires when the text starts to scroll. |
Browser Support
 Edge |
 Chrome |
 Firefox |
 Opera |
 Safari |
|
|---|---|---|---|---|---|
<marquee> |