HTML | <Marquee> tag
The <marquee> tag in HTML is used for creating 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 means that the tag has opening and closing elements.
| 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 |
Example:
<!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> |
chevron_right
filter_none
Output:
Example:
<!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> |
chevron_right
filter_none
Output:
Example:
<!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> |
chevron_right
filter_none
Output:
Recommended Posts:
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.