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...