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:
- Inline HTML Helper - HTML Helpers in ASP.NET MVC
- HTML Course | Structure of an HTML Document
- HTML | <html> xmlns Attribute
- HTML | DOM HTML Object
- HTML Course | Basics of HTML
- What is the difference between <html lang="en'> and <html lang="en-US'> ?
- HTML | th Tag
- HTML | li Tag
- HTML <ins> Tag
- HTML | <dd> Tag
- HTML | col Tag
- HTML | <q> Tag
- HTML | <ul> Tag
- ES6 | HTML DOM
- HTML | <del> Tag
- HTML | <hr> Tag
- PHP vs HTML
- HTML | <i> Tag
- HTML | <html> Tag
- HTML | <rtc> Tag
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.
