HTML Marquee

Marquee Tag

HTML Marquee Tag is a used to add scrolling text in html. Marquee is a non standard element in HTML5. We can also control marquee speed, direction , scrolldelay and Stop or start marquee on mouseover and mouseout using marquee attributes.

To use marquee in Html5, use CSS3 Animations

HTML marquee example

<marquee> This is a marquee </marquee>
		

Marquee Attributes

1. Direction
2. Behavior
3. Scrollamount
4. Scrolldelay

Marquee Javascript events

1. Stop Marquee on mouseover
2. Start Marquee on mouseout

Change Marquee Direction

Direction attribute can change direction of marquee. We can change direction of marquee from left to right, right to left, top to bottom or bottom to top. Default direction of marquee is left.

How to Change Marquee direction?

Direction attribute in marquee can have four different values. Default value is left. Other values are right, top and bottom. See example

Marquee Direction Left

<marquee direction="left">marquee with direction left </marquee>

Marquee Direction Right

<marquee direction="right"> This marquee will scroll right </marquee>
		

Marquee Direction Up

<marquee direction="up" height="200"> This marquee will scroll upwards </marquee>
		

Marquee Direction Bottom

<marquee direction="down" height="200"> This marquee will scroll downwards </marquee>
		

Change Marquee Behavior

Marquee's behavior can be changed using behavior attribute. The default behaviour of marquee is scroll. Three possible values for marquee behavior are:

1. Scroll
2. Slide
3. Alternate

Marquee Scroll behavior

Scroll is the default behavior of HTML Marquee.

<marquee> This is scroll behavior of a marquee </marquee>

		

Marquee Slide behavior

Marquee Slide behavior slide marquee but only once.

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

		

Marquee Alternate behavior

Marquee Alternate behavior move marquee from left ro right and then back from right to left. This happens infinitely.

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

		

Change Marquee speed using Scrollamount

Scrollamount attribute is used to change speed of a marquee. Default Marquee speed is 6px per second. To increase or decrease speed of marquee, change value of scrollamount. Scrollamount value is a number.See example

Scrollamount attribute

<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>
		

Delay Marquee using Scrolldelay

Marquee scrolldelay is delay interval between two frames. Scrolldelay works on Firefox, Internet Explorer, Edge, Safari. But on Chrome, scrolldelay is same like scrollamount.

Scrolldelay in marquee

<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>
		

Marquee Javascript Events

Marquee Elements supports javascript mouseover and mouseout events to stop and start. These events are using JavaScript Inline events attribute onmouseover and onmouseout. See examples.

<marquee onmouseover="this.stop()">This marquee will stop on mouseover.</marquee>
		

<marquee onmouseover="this.stop()" onmouseout="this.start()">This marquee will stop on mouseover and restart on mouseout.</marquee>
		

Why Avoid HTML Marquee?

While the HTML Marquee tag is simple to use, it has several drawbacks:

• Accessibility Issues: Moving text can be distracting and difficult to read for users with cognitive disabilities or motion sensitivity.
• SEO Impact: Search engines may not index moving text effectively, and it can negatively affect user experience metrics.
• Performance: Marquee can cause layout shifts and consume resources unnecessarily.
• Modern Standards: As mentioned, it's obsolete in HTML5. CSS animations provide better control and performance.

For modern web development, consider using CSS animations or JavaScript libraries for scrolling effects that are more accessible and performant.