HTML - <marquee> Tag

Quiz

HTML <marquee> tag is used to create auto scrolling or moveable element within webpage.

If we place any content inside this tag then that element will slide from right to left by default on it's own, but we can change the direction and axis through the attribute. This tag is now deprecated tag but supported by major browsers till now, we recommend you to use JavaScript and CSS to create this effect.

Syntax

<marquee>
  ...
</marquee>

Attribute

HTML marquee tag supports Global and Event attributes of HTML. Accept some specific attributes as well which is listed below.

Attribute	Value	Description
width	pixels	Specifies the width of the marquee. This can be a value like 10 or 20% etc.
height	pixels	Specifies the height of the marquee. This can be a value like 10 or 20% etc.(Deprecated)
direction	up down left right	Specifies the direction in which marquee should scroll.(Deprecated)
behavior	scroll slide alternate	Specifies the type of scrolling of the marquee.(Deprecated)
scrolldelay	value	Specifies how long to delay between each jump.(Deprecated)
scrollamount	value	Specifies the speed of marquee element.(Deprecated)
loop	number	Specifies how many times to loop. The default value is INFINITE, which means that the marquee loops endlessly.(Deprecated)
bgcolor	color_name or color_code	Specifies background color in terms of color name or color hex value.(Deprecated)
hspace	pixels	Specifies horizontal space around the marquee.(Deprecated)
vspace	pixels	Specifies vertical space around the marquee.(Deprecated)

Methods

Methods are used to perform some particular task on any element. Below listed method can be used on <marquee> element.

Method	Description
start()	This method is used to start the scrolling of the <marquee> element.
stop()	This method is used to stop the scrolling of the <marquee> element.

Event Handlers

Event Handlers are used to trigger or activate taske based on the behavior of the element. Below listed event handlers can be used on <marquee> element.

Event Handlers	Description
onbounce	This will trigger when the scrolling reaches to the end, but applicable only, when the behavior is set to alternate.
onfinish	This will trigger when the scrolling completed a loop, but applicable only, when the loop is set to a genuine number.
onstart	This will trigger when the scrolling start.

Examples of HTML marquee Tag

Bellow examples will illustrate the usage of marquee tag. Where, when and how to use marquee tag to create scrolling element.

Implementing marquee Element

<!DOCTYPE html>
<html>
<head>
   <title>HTML marquee Tag</title>
</head>
<body>
   <!-- Marquee Element  Default Scrollong from right to left -->
   <marquee>
       <h2>Tutorialspoint: Simply Easy Learning</h2>
   </marquee>
</body>
</html>

Implementing Horizontal Scrolling Effect

In this example we will implementing horizontal scrolling using direction attribute. We can create scrolling from left to right as well as right to left.

<!DOCTYPE html>
<html>
<head>
   <title>HTML marquee Tag</title>
</head>
<body>
   <h3>From right to left Scrolling</h3>
   <marquee height="100"direction="left">Tutorialpoint</marquee>
   <h3>From left to right Scrolling</h3>
   <marquee height="100"direction="right">Tutorialpoint</marquee>
</body>
</html>

Implementing Vertical Scrolling Effect

In this example we will implementing vertical scrolling using direction attribute. We can create scrolling from down to up as well as up to down.

<!DOCTYPE html>
<html>
<head>
   <title>HTML marquee Tag</title>
</head>
<body>
   <h3>From down to up Scrolling</h3>
   <marquee height="100"direction="up">Tutorialpoint</marquee>
   <h3>From up to down Scrolling</h3>
   <marquee height="100"direction="down">Tutorialpoint</marquee>
</body>
</html>

Using all attributes on marquee Tag

Here in this example we will use all the remaining specific attributes indibitualy on the marquee element so you can understand the use of them as well.

<!DOCTYPE html>
<html>
<head>
   <title>HTML marquee Tag</title>
</head>
<body>
   <h2>Default Marquee Element</h2>
   <marquee>
       <p>Tutorialspoint: Simply Easy Learning</p>
   </marquee>
   <h2>Setting width, Height and bgcolor on Marquee Element</h2>
   <marquee width="50%" height="25%" bgcolor="lightgray">
       <p>Tutorialspoint: Simply Easy Learning</p>
   </marquee>
   <h2>Setting Behaviour Marquee Element</h2>
   <marquee behavior="alternate">
       <p>Tutorialspoint: Simply Easy Learning</p>
   </marquee>
   <h2>Setting Speed on Marquee Element</h2>
   <marquee scrollamount="10">
       <p>Tutorialspoint: Simply Easy Learning</p>
   </marquee>
   <h2>Setting delay time on Marquee Element</h2>
   <marquee scrolldelay="600">
       <p>Tutorialspoint: Simply Easy Learning</p>
   </marquee>
</body>
</html>

Supported Browsers

Tag
marquee	Yes	Yes	Yes	Yes	Yes

html_deprecated_tags.htm

Print Page