HTML <marquee> Tag
The <marquee> tag in HTML creates a scrolling text or image effect within a webpage. It allows content to move horizontally or vertically across the screen, providing a simple way to add dynamic movement to elements. It includes attributes like direction to specify whether the content moves left, right, up, or down.
Note: This tag is deprecated from HTML5.
Syntax
<marquee>
<--- contents --->
</marquee>
Attributes :
| Attributes | Values | Description |
|---|---|---|
| bgcolor | Color Name | Define the background color of the marquee. |
| direction | Top, Down, Left, Right | Define the direction of scrolling the content |
| loop | Number | Specifies how many times content moves. The default value is infinite. |
| height | px or % | Define the height of marquee |
| width | px or % | Define the width of marquee |
| hspace | px | Specify horizontal space around marquee |
| vspace | px | Specify vertical space around marquee |
Methods :
| Method | Description |
|---|---|
| start() | Used to start the scrolling of the <marquee> tag. |
| stop() | Used to stop the scrolling of the <marquee> tag. |
Event Handlers :
| Event Handler | Description |
|---|---|
| onbounce | Triggered when a scrolling <marquee> reaches the end, exclusive to ‘alternate’ behavior. |
| onfinish | Activates when the <marquee> completes scrolling loops specified by the ‘loop’ attribute. |
| onstart | Fired at the initiation of scrolling for the HTML <marquee> tag. |
Examples of HTML <marquee> Tag
Example 1: In this example, we will see implementation of above tag with right to left.
<!DOCTYPE html>
<html>
<head>
<title>Marquee Tag</title>
<style>
.main {
text-align: center;
}
.marq {
padding-top: 30px;
padding-bottom: 30px;
}
.geek1 {
font-size: 36px;
font-weight: bold;
color: white;
padding-bottom: 10px;
}
</style>
</head>
<body>
<div class="main">
<marquee class="marq" bgcolor="Green"
direction="left" loop="">
<div class="geek1">
w3wiki
</div>
<div class="geek2">
A computer science portal for Beginner
</div>
</marquee>
</div>
</body>
</html>
Output:
HTML Tag Example Output
Example 2:
In this example, we will see implementation of above tag with another example from bottom to up.
<!DOCTYPE html>
<html>
<head>
<title>Marquee Tag</title>
<style>
.main {
text-align: center;
font-family: "Times New Roman";
}
.marq {
padding-top: 30px;
padding-bottom: 30px;
}
.geek1 {
font-size: 36px;
font-weight: bold;
color: white;
text-align: center;
}
.geek2 {
text-align: center;
}
</style>
</head>
<body>
<div class="main">
<marquee class="marq" bgcolor="Green"
direction="up" loop="">
<div class="geek1">
w3wiki
</div>
<div class="geek2">
A computer science portal for Beginner
</div>
</marquee>
</div>
</body>
</html>
Output:
HTML Tag Example Output
Example 3: In this example, we will see implementation of above tag from up to bottom.
<!DOCTYPE html>
<html>
<head>
<title>Marquee Tag</title>
<style>
.main {
text-align: center;
font-family: "Times New Roman";
}
.marq {
padding-top: 30px;
padding-bottom: 30px;
}
.geek1 {
font-size: 36px;
font-weight: bold;
color: white;
text-align: center;
}
.geek2 {
text-align: center;
}
</style>
</head>
<body>
<div class="main">
<marquee class="marq" bgcolor="Green"
direction="down" loop="">
<div class="geek1">
w3wiki
</div>
<div class="geek2">
A computer science portal for Beginner
</div>
</marquee>
</div>
</body>
</html>
Output:
HTML <marquee> Tag Example Output
Contact Us