Google News
logo
HTML Marquee
The <marquee> element was used to identify text that should move across a defined section of a webpage in a horizontal or vertical direction. The element has been deprecated and should no longer be used. CSS or JavaScript can be used to create similar effects.

The basic use of <MARQUEE ...> is simple. Put most any kind of markup between <MARQUEE ...> and </MARQUEE>.
Example : 1
<html>
    <head>
    <title>Marquee Tags</title>
    </head>
    <body>
      <div style="border:1px solid #EEE; margin:5px 0px; padding:30px 0px;">
<h3><marquee>Marquee Tag (Direction : Left - Right)</marquee></h3>
      </div>
   </body>
</html>
Output :

Marquee Tag (Direction : Left - Right)

Example : 2
<html>
    <head>
    <title>Marquee Tags</title>
    </head>
    <body>
      <div style="border:1px solid #EEE; margin:5px 0px; padding:30px 0px;">
      <h3><marquee direction="right">Marquee Tag (Direction : Right - Left)</marquee></h3>
      </div>
   </body>
</html>
Output :

Marquee Tag (Direction : Right - Left)

Example : 3
<html>
    <head>
    <title>Marquee Tags</title>
    </head>
    <body>
      <div style="border:1px solid #EEE; margin:5px 0px; padding:30px 0px;">
      <h3><marquee>Marquee Tag (Direction : Left - Right)</marquee></h3>
      <h3><marquee direction="right">Marquee Tag (Direction : Right - Left)</marquee></h3>
      </div>
   </body>
</html>
Output :

Marquee Tag (Direction : Left - Right)

Marquee Tag (Direction : Right - Left)

Example : 4
<html>
    <head>
    <title>Marquee Tags</title>
    </head>
    <body>
      <div style="border:1px solid #EEE; margin:5px 0px; padding:30px 0px;">
      <h3><marquee behavior="alternate">Alternate Marquee Tag</marquee></h3>
       <marquee behavior="alternate">
         <img src="images/Free-Time-Learning.png" width="151" height="70" />
       </marquee>
      </div>
   </body>
</html>
Output :

Alternate Marquee Tag

Example : 5
<html>
    <head>
    <title>Marquee Tags</title>
    </head>
    <body>
      <div style="border:1px solid #EEE; margin:5px 0px; padding:30px 0px;">
      <marquee>Marquee Tag</marquee><br>
<marquee scrolldelay="150">Marquee Tag</marquee><br>
            <marquee scrolldelay="200">Marquee Tag</marquee><br><br>
 
   <marquee scrollamount="30">Marquee Tag</marquee>
            <marquee scrollamount="50">Marquee Tag</marquee>
      </div>
   </body>
</html>
Output :
Marquee Tag
Marquee Tag
Marquee Tag

Marquee Tag Marquee Tag
Example : 6
<html>
    <head>
    <title>Marquee Tags</title>
    </head>
    <body>
      <div style="border:1px solid #EEE; margin:5px 0px; padding:30px 0px;">
      <h3><marquee direction="down" scrolldelay="300">Marquee Tag (Direction :  Down)</marquee></h3>
             <h3><marquee direction="up" scrolldelay="300">Marquee Tag (Direction : Up)</marquee></h3>
      </div>
   </body>
</html>
Output :

Marquee Tag (Direction : Down - Right)

Marquee Tag (Direction : Right - Left)

Example : 7
<html>
    <head>
    <title>Marquee Tags</title>
    </head>
    <body>
      <div style="border:1px solid #EEE; margin:5px 0px; padding:30px 0px;">
      <h3><marquee behavior='scroll' direction='left' scrollamount='5' onmouseover='this.stop()' onmouseout='this.start()'> Mouse Over Stop Marquee Tag</marquee></h3>
      </div>
   </body>
</html>
Output :

Mouse Over Stop Marquee Tag