HTML Marquee

Marquee Tag in HTML is used for moving text or image on the webpage. It can be move horizontally and vertically according the need and wish of the programmer. HTML Marquee Tag moves left to right by default and this tag is supported by almost all browsers. The example is as follows:

<marquee> eitworld.com easy learning </marquee>

You can learn about HTML Marquee at eitworld.com in simple way.

  • You can create scrolling display using <marquee> tag.
  • Here is the basic syntax of <marquee> tag :
  • <marquee attribute_name="attribute_value"....more attributes>
    text message or image
    </marquee>
  • Now we will discuss about each and every aspects of <marquee> tag in detail:

Basic Marquee


Here is the simple example of marquee tag:

<!DOCTYPE html >
<html>
<body>
<marquee>This is basic marquee.</marquee>
</body>
</html>


To see live output : Visit Try Yourself Editor

Output


This is basic marquee.

By default <marquee> tag scroll the text or image from right to left.Once it disappears from the left, it re-appears from the right.

Marquee Slide Behaviour

  • Marquee slide behaviour scroll the text or image from right to left once and then stay there where it is. You can again see the similar action by refreshing the page.
  • Here is the simple example of Marquee Slide Behaviour:
<!DOCTYPE html >
<html>
<body>
<marquee behavior="slide">This is marquee slide behavior.Refresh to see the action again.</marquee>
</body>
</html>


To see live output : Visit Try Yourself Editor

Output


This is marquee slide behavior.Refresh to see the action again.

Alternate marquee behavior


  • Marquee slide behaviour scroll the text or image from right to left and then from left right and so on.
  • Here is the simple example of Alternate marquee behavior:
<!DOCTYPE html >
<html>
<body>
<marquee behavior="alternate">This is alternate marquee behavior</marquee>
</body>
</html>


To see live output : Visit Try Yourself Editor

Output


This is alternate marquee behavior

Right marquee direction


Here is the simple example of Right marquee direction:

<!DOCTYPE html >
<html>
<body>
<marquee direction="right">Right marquee direction</marquee>
</body>
</html>


To see live output : Visit Try Yourself Editor

Output


Right marquee direction

  • In the above example <marquee> tag scroll the text or image from left to right.Once it disappears from the right, it re-appears from the left.

    Up marquee direction


    Here is the simple example of Up marquee direction:

    <!DOCTYPE html >
    <html>
    <body>
    <marquee direction="up">Up marquee direction</marquee>
    </body>
    </html>


    To see live output : Visit Try Yourself Editor

    Output


    Up marquee direction

    In the above example <marquee> tag scroll the text or image from bottom to up.Once it disappears from the upward direction, it re-appears from the downward direction.

    =Down marquee direction


    Here is the simple example of Down marquee direction:

    <!DOCTYPE html >
    <html>
    <body>
    <marquee direction="down">Down marquee direction</marquee>
    </body>
    </html>


    To see live output : Visit Try Yourself Editor

    Output


    Down marquee direction

    In the above example <marquee> tag scroll the text or image from up to bottom.Once it disappears from the downward direction, it re-appears from the upward direction.

    Marquee width attribute


    Here is the simple example of Marquee width attribute:

    <!DOCTYPE html >
    <html>
    <body>
    <marquee width="60%">This example will take only 60% width</marquee>
    </body>
    </html>


    To see live output : Visit Try Yourself Editor

    Output


    This example will take only 60% width


    In the above example <marquee> tag will take only 60% width.

    Marquee SCROLLAMOUNT


    Smaller SCROLLAMOUNT value scrolls marquee slower.

  • Here is the simple example of Marquee SCROLLAMOUNT:

    <!DOCTYPE html >
    <html>
    <body>
    <marquee scrollamount="10">SCROLLAMOUNT marquee equals 10</marquee> <marquee scrollamount="20">SCROLLAMOUNT marquee equals 20</marquee> </body>
    </html>


    To see live output : Visit Try Yourself Editor

    Output


    SCROLLAMOUNT marquee equals 10

    SCROLLAMOUNT marquee equals 20

    Scroll Image with <Marquee> tag


    You can also scroll images with <marquee> tag.

  • Here is the simple example of scrolling Image with <Marquee> tag:

    <!DOCTYPE html >
    <html>
    <body>
    <marquee direction="down"><img src="images/cat_run.jpg" /></marquee>
    </body>
    </html>


    To see live output : Visit Try Yourself Editor

    Output