HTML marquee

HTML marquee tag creates a scrolling effect and with the help of marquee we can scroll piece of text or image either in horizontally across or vertically down.

Note: <marquee> tag may not be supported by various browsers.

Syntax

<marquee> Your text here </marquee>

<marquee>Attributes

Blow is the list of important attributes that we can use with <marquee> tag.

AttributeDescription
widthto specifies width, value can be 10 or 10% etc.
heightto specifies height, value can be 10 or 10% etc.
directionto specifies the scroll direction of marquee. Value can be up, down, left or right.
behaviorto specifies the type of scrolling. Value can be scroll, slide and alternate.
scrolldelayto slower down the speed of marquee scroll. Value can be 10, 20 etc.
scrollamountto specifies the speed of marquee scroll. Value can be 10, 20 etc.
loopto specifies how many times to scroll. Value can be 1,2,3 etc. default value is infinite.
bgcolorto specifies background color of marquee. Value can be red, green, etc.

Let’s see examples of marquee with different attributes.

Examples – 1

<html>
<head>
<title>Marquee Tag</title>
</head>
<body>
<marquee>Example of marquee tag.</marquee>
</body>
</html>

This will produce following output:

Example of marquee

Examples – 2

<html>
<head>
<title>Marquee Tag</title>
</head>
<body>
<marquee width=”40%”>This example taking 40% width</marquee>
</body>
</html>

This will produce following output:

This example taking 40% width

Examples – 3

<html>
<head>
<title>Marquee Tag</title>
</head>
<body>
<marquee direction=”right”>Example to scroll text from left to right</marquee>
</body>
</html>

This will produce following output:

Example to scroll text from left to right

Examples – 4

<html>
<head>
<title>Marquee Tag</title>
</head>
<body>
<marquee direction=”up”>Example to scroll text from bottom to up</marquee>
</body>
</html>

This will produce following output:

Example to scroll text from bottom to up

Examples – 5

<html>
<head>
<title>Marquee Tag</title>
</head>
<body>
<marquee behavior=”alternate” scrollamount=”20″>Example with marquee behavior and scrollamount</marquee>
</body>
</html>

This will produce following output:

Example with marquee behavior and scrollamount

Examples – 6

<html>
<head>
<title>Marquee Tag</title>
</head>
<body>
<marquee scrolldelay=”200″>Example of scroll delay.</marquee>
</body>
</html>

This will produce following output:

Example of scroll delay.

Leave a Reply