What is a Marquee and how is it applied in HTML?

HTML Web Development Front End Technology

In HTML, the <marquee> tag is used to insert a scrolling area for text on the webpage. It is a special effect that is used to scroll the content horizontally, vertically, up, down, bouncing, etc. This feature is no longer recommended. But still, some browsers may support it.

Syntax

Following is the syntax of the HTML <marquee> tag −

<marquee attribute_name = "attribute_value"....more attributes>
   One or more lines or text messages or image
</marquee>

Attributes

We can control the scrolling effect of the text using its attributes. Following is the list of important attributes which can be used with <marquee> tag −

S.No	Attribute & Description
1	width This specifies the width of the marquee. This can be a value like 10 or 20% etc.
2	height This specifies the height of the marquee. This can be a value like 10 or 20% etc.
3	direction This specifies the direction in which the marquee should scroll. This can be a value like up, down, left, or right.
4	behavior This specifies the type of scrolling of the marquee. This can have a value like scroll, slide, and alternate.
5	scrolldelay This specifies how long to delay between each jump. This will have a value like 10 etc.
6	scrollamount This specifies the speed of marquee text. This can have a value like 10 etc. The default value for this attribute is 85.
7	loop This specifies how many times to loop. The default value is INFINITE, which means that the marquee loops endlessly.
8	bgcolor This specifies background color in terms of color name or color hex value.
9	hspace This specifies horizontal space around the marquee. This can be a value like 10 or 20% etc.
10	vspace This specifies vertical space around the marquee. This can be a value like 10 or 20% etc.

Given below are a few examples to demonstrate the usage of HTML marquee tag.

Example

Following is the usage of HTML <marquee> tag.

<!DOCTYPE html>
<html>
<head>
   <title>Marquee tag in HTML</title>
</head>
<body>
   <marquee>Tutorialspoint, Simply Easy Learning at your fingertips...</marquee>
</body>
</html>

Example

In the following example, we are using the direction attribute to scroll the text from left and right −

<!DOCTYPE html>
<html>
<head>
   <title>Marquee tag in HTML</title>
</head>
<body>
   <marquee direction="left">Tutorialspoint, Simply Easy Learning at your fingertips...</marquee>
   <marquee direction="right">Tutorialspoint, Simply Easy Learning at your fingertips...</marquee>
</body>
</html>

Example

Here, we are using the direction attribute to scroll the text from up and down −

<!DOCTYPE html>
<html>
<head>
   <title>Marquee tag in HTML</title>
</head>
<body>
   <marquee direction="up" height="250px">Tutorialspoint, Simply Easy Learning at your fingertips...</marquee>
   <marquee direction="down" height="250px">Tutorialspoint, Simply Easy Learning at your fingertips...</marquee>
</body>
</html>

Example

In the following example, we are creating a bouncing scrolling effect behavior attribute.

<!DOCTYPE html>
<html>
<head>
   <title>Marquee tag in HTML</title>
</head>
<body>
   <marquee
      direction="up"
      width="200px"
      height="100px"
      behavior="alternate"
      style="border:solid 1px">
      <marquee behavior="alternate">Tutorialspoint</marquee>
   </marquee>
</body>
</html>

Example

In the example below, we are using the behavior, direction, and scrollamount attribute to specify the scrolling time delay.

<!DOCTYPE html>
<html>
<head>
   <title>Marquee tag in HTML</title>
</head>
<body>
   <marquee behavior="scroll" direction="left" scrollamount="10">Tutorialspoint</marquee>
   <marquee behavior="scroll" direction="left" scrollamount="20">Tutorialspoint</marquee>
   <marquee behavior="scroll" direction="left" scrollamount="30">Tutorialspoint</marquee>
   <marquee behavior="scroll" direction="left" scrollamount="40">Tutorialspoint</marquee>
</body>
</html>

Nikhilesh Aleti

Updated on: 04-Aug-2023

76 Views

Kickstart Your Career

Get certified by completing the course

Get Started