HTML – Marquees

The Marquee HTML tag is a non-standard HTML element which is used to scroll an image or text horizontally or vertically.

In simple words, you can say that it scrolls the image or text up, down, left or right automatically.

Marquee tag was first introduced in early versions of Microsoft’s Internet Explorer. It is compared with Netscape’s blink element

<marquee>This is an example of html marquee </marquee>  

Attributes of Marquee Tag

Marquee’s element contains several attributes that are used to control and adjust the appearance of the marquee.

behaviorIt facilitates user to set the behavior of the marquee to one of the three different types: scroll, slide and alternate.
directiondefines the direction for scrolling content. It may be left, right, up and down.
widthdefines the width of the marquee in pixels or %.
heightdefines the height of marquee in pixels or %.
hspacedefines horizontal space in pixels around the marquee.
vspacedefines vertical space in pixels around the marquee.
scrolldelaydefines scroll delay in seconds.
scrollamountdefines scroll amount in number.
loopdefines loop for marquee content in number.
bgcolordefines background color. It is now deprecated.

HTML Scroll Marquee

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

<marquee width="100%" behavior="scroll" bgcolor="pink">  
This is an example of a scroll marquee...  

HTML Slide Marquee

In slide marquee, all the contents to be scrolled will slide the entire length of marquee but stops at the end to display the content permanently.

<marquee width="100%" behavior="slide" bgcolor="pink">  
This is an example of a slide marquee...  

HTML Alternate Marquee

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

<marquee width="100%" behavior="alternate" bgcolor="pink">  
This is an example of a alternate marquee...  

Direction in Marquee

This is used to change the direction of the scrolling text. Let’s take an example of marquee scrolling to the right. The direction can be left, right, up and down.

<marquee width="100%" direction="right">  
 This is an example of a right direction marquee...  

HTML Nested Marquee

This tag is used to embed marquee within primary marquee tag.

<marquee width="400px" height="100px" behavior="alternate" style="border:2px solid red">  
<marquee behavior="alternate">  
Nested marquee...  

Disadvantages of Marquee

The disadvantages of the marquee are as follows:-

  • Marquee may be distracting because human eyes are attracted towards movement and marquee text constantly.
  • It draws user’s attention needlessly and makes the text harder to read.
  • Since Marquee text moves, so it is more difficult to click the static text, depending on the scrolling speed.
  • It is a non-standard HTML element.

Supporting Browsers