Marquee tag in HTML with all Attributes | Animation Effect

marquee tag in html

Marquee tag in HTML <marquee> is used to insert a scrolling text and image. In easy words, you can understand that it scrolls the image or text in many directions such as up, down, left or right automatically. By default, text found within the marquee tag will scroll from right to left. The marquee tag in HTML has been deprecated in HTML5 but still we can use it in lower versions of HTML and should not be used further anymore. It is suggested that you employ CSS instead of achieve the same scrolling effect.

Marquee tag Attributes

There are many attributes of marquee tag which makes it very interesting and reliable

AttributeValueDescription
behaviorscroll
slide
alternate
It facilitates user to set the behavior of the marquee to one of the three different types value
directionup
down
left
right
It defines the direction of scrolling the content (text/images etc.).
bgcolorrgb(x,x,x)
xxxxxx
colorname
It defines background color. It is now deprecated in HTML5
scrollamountnumberIt defines scroll amount in number that is speed of scrolling
loop numberIt specifies how many times to loop. The default value is INFINITE, which means that the marquee loops endlessly.
heightpixelsIt defines the height of marquee in pixels
widthpixels or %It defines the width of marquee in pixels as well as percentage
hspacepixelsIt defines horizontal space in pixels around the marquee
vspacepixelsIt defines vertical space in pixels around the marquee
scrolldelaysecondsIt defines how long to delay between each jump/loop

Advantage

  • They immediately draw attention to themselves
  • And perhaps most of all: they are relatively rare meaning that they’ll be memorable and all the more likely to stand out
  • They are fun and quirky
  • the layout and design is perfectly suited to entertaining

Disadvantage

  • Marquee may be distracting because human eyes are attracted towards movement and marquee text constantly.
  • Since Marquee text moves, so it is more difficult to click static text, depending on the scrolling speed.
  • It is a non-standard HTML element.
  • It draws user’s attention needlessly and makes the text harder to read.

Marquee tag Code

<!DOCTYPE html>
<html>
   <head>
      <title>HTML marquee Tag</title>
   </head>

   <body>

      <marquee>Example of marquee</marquee>

<!---Scroll Up---->
<marquee width="60%" direction="up" height="100px">
This is a sample scrolling text that has scrolls in the upper direction.
</marquee>

<!---Scroll Down---->
<marquee width="60%" direction="down" height="100px">
This is a sample scrolling text that has scrolls texts to down.
</marquee>

<!--- Scroll right to left---->
<marquee width="60%" direction="right" height="100px">
This is a sample scrolling text that has scrolls texts to right.
</marquee>


<!--- Scroll left to right---->
<marquee width="60%" direction="left" height="100px">
This is a sample scrolling text that has scrolls texts to left.
</marquee>


<!--- Scrolling Speed---->
<marquee behavior="scroll" direction="up" scrollamount="1">Slow Scrolling</marquee>
<marquee behavior="scroll" direction="left" scrollamount="10">Fast Scrolling</marquee>
   </body>

</html>

Supporting browsers

ElementChromeIEOperaSafariFirefox
<marquee>Yes Yes Yes Yes Yes

Marquee Tag Methods

MethodDescriptionHTML Compatibility
start()Starts the text scrolling within the marqueeHTML 4.1, Deprecated in HTML 5
stop()Stops the text from scrolling within the marquee HTML 4.1, Deprecated in HTML 5

Note
Marquee tag with all attributes video on YouTube – Click here
How to make website using HTML only – Click here