HTML <marquee> Tag
The <marquee> tag in HTML is used to create scrolling text or image in a webpages. It scrolls either from horizontally left to right or right to left, or vertically top to bottom or bottom to top.
Syntax :
The marquee element comes in pairs. It means that the tag has opening and closing elements.
<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
- start (): This method is used to start the scrolling of the Marquee Tag.
- stop (): This method is used to stop the scrolling of the Marquee Tag.
Example:
html
<!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">GeeksforGeeks</div> <div class="geek2">A computer science portal for geeks</div> </marquee> </div></body></html> |
Output:
Marquee Tag
.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; padding-bottom:10px; }
A computer science portal for geeks
Example:
html
<!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">GeeksforGeeks</div> <div class="geek2">A computer science portal for geeks</div> </marquee> </div></body></html> |
Output:
Marquee Tag
.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; }
A computer science portal for geeks
Example:
html
<!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">GeeksforGeeks</div> <div class="geek2">A computer science portal for geeks</div> </marquee> </div></body></html> |
Output:
Marquee Tag
.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; }
A computer science portal for geeks
Supported Browsers
- Google Chrome 1.0
- Edge 12.0
- Firefox 65.0
- Internet Explorer 2.0
- Opera 7.2
- Safari 1.2
Please Login to comment...