What is Html Marquee text?
HTML marquee is a piece of ‘running text’ on you web page either horizontally or vertically depending upon yours setting. This can be created using HTML <marquee> tag. We use following syntax for marquee text.
<marquee attribute name = attribute value = “Type your text here” </marquee> |
List of Marquee attributes:
| Attribute Name | Description | Attribute value |
| Height | Height attribute specifies the height of marquee text. | 10% or 20% |
| Width | Width attribute specifies the width of marquee text | 10% or 20% |
| Direction | Direction attribute specifies the direction of text. | Left, Right, Up, Down |
| Behavior | Behavior attribute specifies the type of scrolling. | Scroll, Slide |
| Scrollamount | Scrollamount attribute specifies the speed of marquee text. | Fast, Slow |
| Scrolldelay | Scrolldelay attribute specifies the time gap to delay the text from reappearing again. | Time in milliseconds |
| Bgcolor | Bgcolor specifies the background color of text | color code/color name |
| Loop | Loop attributes specifies how many times, text to be looped | number/infinite |
| Hspace | Hspace attribute specifies the horizontal space to the left and right of text | pixel % |
| Vspace | Vspace attribute specifies the vertical space to the top and bottom of text | pixel % |
Let’s learn more with following examples:
Example 1 – Height and Width Attribute
| <!DOCTYPE html> <html> <head> <title>HTML height & width marquee attribute example </title> </head> <body> <marquee height = 80% width = 90%>Height and Width Attribute Example</marquee> </body> </html> |
This will produce the following results:
Example 2 – Direction Attribute
| <!DOCTYPE html> <html> <head> <title>HTML marquee text direction example </title> </head> <body> <marquee direction = left > Left direction text</marquee> <marquee direction = right > Righ direction text</marquee> </body> </html> |
This will produce the following results:
Example 3 – Behavior Attribute
| <!DOCTYPE html> <html> <head> <title>HTML marquee text behavior example </title> </head> <body> <marquee behavior = scroll > Scrolling text</marquee> </body> </html> |
This will produce the following results:
Example 4 – Scrollamount Attribute
| <!DOCTYPE html> <html> <head> <title>HTML marquee scrollamount example </title> </head> <body> <marquee scrollamount = 10 > Scroll speed = 10 </marquee> <marquee scrollamount = 20 > Scroll speed = 20 </marquee> <marquee scrollamount = 30 > Scroll speed = 30 </marquee> </body> </html> |
This will produce the following example:
Example 5 – Scrolldelay Attribute
| <!DOCTYPE html> <html> <head> <title>HTML marquee scrolldelay example </title> </head> <body> <marquee scrolldelay = 500 > Scroll delay = Half second </marquee> <marquee scrolldelay = 1000 > Scroll delay = One second </marquee> <marquee scrolldelay = 2000 > Scroll delay = One and half seconds </marquee> </body> </html> |
This will produce the following results:
# Scrolldelay = 1000 (milliseconds) represents text delay of one second. Default delay is 85.
Example 6 – Bgcolor Attribute
| <!DOCTYPE html> <html> <head> <title>HTML marquee bgcolor example </title> </head> <body> <marquee bgcolor = yellow > Your text </marquee> <marquee bgcolor = Green > Your text </marquee> </body> </html> |
This will produce the following results:
Example 7 – Hspace Attribute
| <!DOCTYPE html> <html> <head> <title>HTML hspace and vspace example </title> </head> <body> <p> Right space <marquee hspace = 20 width = 80 bgcolor = pink> Your text </marquee> Left space </P> <p> Righ space <marquee hspace = 60 width = 80 bgcolor = pink> Your text </marquee> Left space</p> </body> </html> |
This will produce the following results:
Right space Left space Righ space Left space |
Example 8 – Vspace Attribute
| <!DOCTYPE html> <html> <head> <title>HTML hspace and vspace example </title> </head> <body> <p> Top space </P> <marquee vspace = 20 width = 100 bgcolor = pink> Your text </marquee> <p>Bottom space</p> </body> </html> |
This will produce the following results:
Top space Bottom space |