23 Jul 2017
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.
| Attribute | Description |
|---|---|
| width | to specifies width, value can be 10 or 10% etc. |
| height | to specifies height, value can be 10 or 10% etc. |
| direction | to specifies the scroll direction of marquee. Value can be up, down, left or right. |
| behavior | to specifies the type of scrolling. Value can be scroll, slide and alternate. |
| scrolldelay | to slower down the speed of marquee scroll. Value can be 10, 20 etc. |
| scrollamount | to specifies the speed of marquee scroll. Value can be 10, 20 etc. |
| loop | to specifies how many times to scroll. Value can be 1,2,3 etc. default value is infinite. |
| bgcolor | to 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>
<head>
<title>Marquee Tag</title>
</head>
<body>
<marquee>Example of marquee tag.</marquee>
</body>
</html>
This will produce following output:
Examples – 2
<html>
<head>
<title>Marquee Tag</title>
</head>
<body>
<marquee width=”40%”>This example taking 40% width</marquee>
</body>
</html>
<head>
<title>Marquee Tag</title>
</head>
<body>
<marquee width=”40%”>This example taking 40% width</marquee>
</body>
</html>
This will produce following output:
Examples – 3
<html>
<head>
<title>Marquee Tag</title>
</head>
<body>
<marquee direction=”right”>Example to scroll text from left to right</marquee>
</body>
</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:
Examples – 4
<html>
<head>
<title>Marquee Tag</title>
</head>
<body>
<marquee direction=”up”>Example to scroll text from bottom to up</marquee>
</body>
</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:
Examples – 5
<html>
<head>
<title>Marquee Tag</title>
</head>
<body>
<marquee behavior=”alternate” scrollamount=”20″>Example with marquee behavior and scrollamount</marquee>
</body>
</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:
Examples – 6
<html>
<head>
<title>Marquee Tag</title>
</head>
<body>
<marquee scrolldelay=”200″>Example of scroll delay.</marquee>
</body>
</html>
<head>
<title>Marquee Tag</title>
</head>
<body>
<marquee scrolldelay=”200″>Example of scroll delay.</marquee>
</body>
</html>
This will produce following output:
About Author
bestonetechnologies
I am a software developer.
