Advertisement

Advertisement


HTML Marquee Tag

This HTML tutorial explains how to use the HTML the <marquee> tag with syntax and examples. The HTML <marquee> tag is used to scroll an image or text horizontally or vertically used on webpages, website or blogs. In simple words, it scrolls the image or text up, down, left or right automatically.

By default, text 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.

You can also easily control marquee speed, marquee scrolldelay, marquee direction and Stop or start marquee on mouseover and mouseout using marquee attributes.


<!DOCTYPE html>
<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

HTML Marquee Tag Examples This is an example of HTML marquee.

The 'Scroll' Marquee

It is a by default property. It is used to scroll the text from right to left by default and restarts at the right side of the marquee when it is reached to the end of the left side.


<!DOCTYPE html>
<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

HTML Marquee Scroll Attribute This is an example of a scroll marquee Up Side Direction...

The 'Slide' Marquee

It scrolls the text from right to left and at the end it stop Moving.


<!DOCTYPE html>
<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

HTML Marquee Slide Attribute This is an example of a slide marquee...

The 'Alternate' Marquee

It scrolls the text from right to left and then goes back left to right.


<!DOCTYPE html>
<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

HTML Marquee Alternate Attribute This is an example of a alternate marquee...

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.


<!DOCTYPE html>
<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 Direction Attribute Examples This is an example of a Up side direction marquee... This is an example of a Down side direction marquee... This is an example of a Right side direction marquee... This is an example of a Left side direction marquee...

HTML Marquee 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.

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

Element
Microsoft Edge browser.png Edge
Chrome browser.png Chrome
Firefox browser.png Firefox
Opera browser.png Opera
safari browser.png Safari
<marquee>
Yes
Yes
Yes
Yes
Yes




Color Picker

List of color names supported by all browser »



Character Code

List of character codes to display special character »



Language Code

List of all language supported by all browser »



Country Code

List of Country code supported by all browser »