<marquee> tag in HTML

This “marquee tag in HTML” post provides information about how to scroll the text on a web page in different directions, how to increase and decrease scrolling speed and How many times we need to iterate using loop attribute and much more.


<marquee>:

  • By using this tag, we can display the scrolling content on the webpage.
  • It is providing a number of attributes.
  • By default the content on the web page will move towards left.

<!DOCTYPE html>
<html>
<body>
<marquee>Welcome to HTML tutorial blog </marquee>
</body>
</html>

  • If we would like to change the direction then we can change the direction with the values of ‘direction’ attribute.
  • Direction: By using this attribute, we can change the direction of marquee, the values are left, right, up and down.

<!DOCTYPE html>
<html>
<body>
<marquee direction=”right”> Welcome to HTML tutorial blog </marquee>
</body>
</html>


Behavior:

  • By using this attribute we can change the scrolling style of the marquee.
  • It contains three values alternate, slide and scroll.
  • “scroll” is the default behavior.

<!DOCTYPE html>
<html>
<body>
<marquee direction=”left” behavior=”alternate”>Welcome to all</marquee>
</body>
</html>

 

  • Here we can observe that the movement of content is that first it will start from right and moves towards left then it will move alternatively from ‘left to right’ and ‘right to left’.

<!DOCTYPE html>
<html>
<body>
<marquee direction=”left” behavior=”slide”>Welcome to all</marquee>
</body>
</html>


Scroll amount:

  • By using this attribute we can increase or decrease the scrolling speed of marquee.
  • Default scrolling speed of “marquee text” is “7”

<!DOCTYPE html>
<html>
<body>
<marquee direction=”left” behavior=”alternate” scrollamount=”40″>Welcome to all</marquee>
</body>
</html>


Loop:

  • By using this attribute, we can provide the total number of iterations to the marquee tag.

<!DOCTYPE html>
<html>
<body>
<marquee direction=”left” behavior=”alternate” scrollamount=”30″ loop=”2″>Welcome to all</marquee>
</body>
</html>
Here the loop repeats only two times on the web page.


Next Topic:   <Meta> and <Embed> Tags in HTML

Share this