HTML Marquee Tag

HTML Marquee is used to scroll text or image from left to right, right to left, bottom to top and top to bottom direction. We can also control marquee speed, marquee direction , marquee scrolldelay and Stop or start marquee on mouseover and mouseout.

Marquee Code

This is a marquee

<marquee> This is a marquee </marquee>
		

Marquee Direction

Direction attribute can change direction of marquee, i.e from left to right, right to left, top to bottom or bottom to top.

Marquee with direction

This marquee will scroll to left This marquee will scroll to right This marquee will scroll to upwards This marquee will scroll downwards

<marquee direction="left"> This marquee will scroll left </marquee>
<marquee direction="right"> This marquee will scroll right </marquee>
<marquee direction="up" height="200"> This marquee will scroll upwards </marquee>
<marquee direction="down" height="200"> This marquee will scroll downwards </marquee>

		


Marquee Behaviour

Marquee's behaviour can be changed using behavior attribute. Three possible values for marquee behavior are:

  1. Scroll
  2. Slide
  3. Alternate

Marquee Scroll, slide and Alternate behavior

This is scroll behavoior of marquee This is slide behavior of a marquee This is alternate behavior of a marquee

<marquee behavior="scroll"> This is scroll behavior of a marquee </marquee>
<marquee behavior="slide"> This is slide behavior of a marquee </marquee>
<marquee behavior="alternate">This is alternate behavior of a marquee </marquee>

		

Marquee scrollamount, or Speed

Speed of a marquee can be controlled by using scrollamount attribute. Default Marquee speed is 6.

Attribute name "Scrollamount"

This is a marquee with scrollamount 10 This is a marquee with scrollamount 25 This is a marquee with scrollamount 50 This is a marquee with scrollamount 100

<marquee scrollamount="10"> This is a marquee with scrollamount 10 </marquee>
<marquee scrollamount="25"> This is a marquee with scrollamount 25 </marquee>
<marquee scrollamount="50"> This is a marquee with scrollamount 50 </marquee>
<marquee scrollamount="100"> This is a marquee with scrollamount 100 </marquee>
		

Marquee Scrolldelay

Speed of a marquee can be control by using attribute scrollamount.

Scrolldelay in marquee

This is a marquee with scrolldelay 10 This is a marquee with scrolldelay 25 This is a marquee with scrolldelay 50 This is a marquee with scrolldelay 100 This is a marquee with scrolldelay 200 This is a marquee with scrolldelay 300 This is a marquee with scrolldelay 500 This is a marquee with scrolldelay 1000

<marquee scrolldelay="10">This is a marquee with scrolldelay 10</marquee>
<marquee scrolldelay="25">This is a marquee with scrolldelay  25</marquee>
<marquee scrolldelay="50">This is a marquee with scrolldelay  50</marquee>
<marquee scrolldelay="100">This is a marquee with scrolldelay  100</marquee>
<marquee scrolldelay="200">This is a marquee with scrolldelay  200</marquee>
<marquee scrolldelay="300">This is a marquee with scrolldelay  300</marquee>
<marquee scrolldelay="500">This is a marquee with scrolldelay  500</marquee>
<marquee scrolldelay="1000">This is a marquee with scrolldelay  1000</marquee>
		

Stop and Start Marquee on mouseover

We can stop and restart marquee on mouseover.

Mouseover and click Event for Marquee

This marquee will stop on mouseover. This marquee will stop on mouseclick.

<marquee onmouseover="this.stop()" onmouseout="this.start()">This marquee will stop on mouseover.</marquee>
<marquee onclick="this.stop()" ondblclick="this.start()">This marquee will stop on mouseclick and start on double click. </marquee>
		

HTML Marquee is supported by all major browsers. In chrome, marquee scrollamount is not functional. Marquee was a part of HTML4, but in HTML-5 it is obsolete.