Skip to main content

HTML Marquee Tag simple Example for texts

program45_-rt8nb CSS, HTML

To show scrollable texts or images within a web page we use marquee tag in html. Marquee tag has around ten attributes. Marquee can be implemented by using CSS. Below are examples of marquee tag with different attributes and their code.

Width Attribute: By providing width in percent we design marquee.

<marquee width="60%" >
This is a example of width attribute in marquee tag.
</marquee>
This is a example of width attribute in marquee tag.

Height Attribute: provides the height of a marquee

<marquee width="80%" height="80%">
This is a example of width attribute in marquee tag.
</marquee>
This is a example of width attribute in marquee tag.

Direction: Direction attribute provides the direction to scroll. values which can be used are left, right, up or down.

<marquee  direction="up" >Text going Up</marquee>
<marquee  direction="right">Text going Right</marquee>
<marquee direction="left" >Text going left</marquee>
<marquee  direction="right">Text going Down</marquee>
Text going Up Text going Right Text going left Text going Down

Scrolldelay: The Marquee scrolldelay attribute in HTML is used to set the interval between each scroll movement in milliseconds.

<marquee direction="up" scrolldelay=500>Text going Up</marquee>
<marquee direction="right" scrolldelay=200>Scroll Delay for 200</marquee>
<marquee direction="down" scrolldelay=1500>Scroll delay around 1500</marquee>
Text going Up Scroll Delay for 200 Scroll delay around 1500

scrollamount: Marquee speed can be changed using the “scrollmount” attribute. By Setting value 1 it scrolls slow and to increase the speed we can specify value more than 1

<marquee behavior="scroll" direction="right" scrollamount="1">Slow Scrolling</marquee>
<marquee behavior="scroll" direction="right" scrollamount="10">Little Fast Scrolling</marquee>
<marquee behavior="scroll" direction="right" scrollamount="25">Fast Scrolling</marquee>
<marquee behavior="scroll" direction="right" scrollamount="45">Very Fast Scrolling</marquee>
Slow Scrolling Little Fast Scrolling Fast Scrolling Very Fast Scrolling

Behavior: Three different values we can pass in behavior tag. Sliding, scrolling or alternate.

<marquee behavior="Slide" direction="right" scrollamount="10">Sliding Behavior</marquee>
<marquee behavior="scroll" direction="right" scrollamount="10">Scrolling Behavior</marquee>
<marquee behavior="alternate" direction="right" scrollamount="10">Alternate Behavior</marquee>
Sliding Behavior Scrolling Behavior Alternate Behavior

Loop: This category will decide number of times marquee is repeated. Valid values are number and “infinite”. Infinite is default value which means it runs endlessly.

<marquee scrollamount="5" loop="infinite">Infinite example for marquee</marquee>
<marquee scrollamount="5" loop="1">Loop through 1 time only for marquee</marquee>
Infinite example for marquee Loop through 1 time only for marquee

Alternative for marquee tag in html 5

There is no such alternative for marquee tag. But similar type effect we can achieve by using CSS, JavaScript.

Refer this for alternate of marquee in CSS.

For more information refer