Marquee tag in HTML

Marquee Element in HTML is used to handle the scrolling effect of text and images in different directions with the help of Attributes within the webpage of the HTML document to enhance the look of the website. Let us understand the HTML Marquees in detail.

Using <marquee> tag in HTML

The HTML <marquee> tag is the container tag that is used to define the scrolling effect of the text or image element either vertically or horizontally or to be precise the scrolling of the element is either top to bottom or vice versa or left to right or vice versa.

  • <marquee> tag used in HTML 4 and no longer used in the latest version of HTML i.e HTML 5.
  • Javascript and cascading style sheets are used instead of <marquee> tag for the same effects.
  • <marquee> tag supports global and event Attributes and it is supported by only a few browsers for eg –  firefox, internet explorer, safari, chrome, etc.

Syntax

<marquee attribute name = “marquee attribute value…”> content </marquee>

marquee tag starts with the opening tag and ends with the closing tag with attribute value and content in between.

Attributes in <marquee> tag

There are several attributes of <marquee> tag in HTML that are given below :

  1. behavior: This Attribute is used to define the type of scrolling in a marquee with the value like slide, scroll, and alternate.
  2. direction: This attribute is used to define the direction of the scrolling with the value of up, down, right, left.
  3. width: This Attribute is used to define the width of the marquee in pixels or percentages.
  4. height: This Attribute is used to define the height of the marquee in pixels or percentages.
  5. scrolldelay: This Attribute is used to define the delay between the scrolling in milliseconds.
  6. scrollamount: This Attribute is used to define the interval in the speed of the marquee in numbers.
  7. loop: This Attribute is used to define the number of times scrolling of the marquee in number, the default number is infinite.
  8. vspace: This Attribute is used to define the vertical space around the marquee with the value in pixel.
  9. hspace: This Attribute is used to define the horizontal space around the marquee with the value in pixel.

Example of <marquee> tag in HTML

Few examples to demonstrate the use of the HTML Marquee tag is given below.

1. Example of horizontal scrolling using marquee tag with bgcolor Attribute.

<!DOCTYPE html>
<html>

   <head>
      <title>marquee Tag in HTML</title>
   </head>

   <body>
      <marquee width= 100% direction = "right" bgcolor="pink">Example of scrolling text  from left to right
     </marquee><br>
      
      <marquee width= 50% direction="left"  bgcolor="yellow"  height="100px">Example of scrolling text  from Right to left
</marquee>
   </body>
  
</html>

OUTPUT:

2. Example of Vertical scrolling using the marquee tag with height & width Attributes.

<!DOCTYPE html>
<html>

   <head>
      <title>Example of marquee Tag in HTML</title>
   </head>

   <body>
     <marquee width="80%" direction="up" height="100px">
Example of scrolling text bottom to up.
</marquee><br>
      <marquee width="70%" direction="down" height="100px">
Example of scrolling text up to bottom
</marquee>
</body>
</html>

OUTPUT:

3. Example of reverse scrolling using the marquee tag with behavior Attribute of alternate value.

<!DOCTYPE html>
<html>

   <head>
      <title>Example of marquee Tag in HTML</title>
   </head>

   <body>
        <marquee width="100%" behavior="alternate" bgcolor="LIGHTBLUE">  
     Example of alternate marquee tag
    </marquee>  
</body>
</html>

OUTPUT:

4. Example of Image scrolling using the marquee tag with direction  Attribute of down value.

<!DOCTYPE html>
<html>

   <head>
      <title>Example of image marquee Tag in HTML</title>
   </head>

   <body>
      <marquee width= 100% direction = "down"><img src="/home/aman/Desktop/frames/codebunlogo.png" width="300" height="100" alt="codebun logo" /><br />

     </marquee><br>
      	
</html>

OUTPUT: