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 |