Articles → HTML → Marquee Tag In HTML

Marquee Tag In HTML

In this article, we will discuss the marquee tag in HTML.

Purpose

Marquee tag makes the text or image or web control scroll up, down, left, and right depending upon the settings.

Syntax

    <!--For Text-->
    <Marquee>Text</Marquee>
    <!--For image-->
    <Marquee>
        <img src="image_source" />
    </Marquee>
    <!--For image-->
    <Marquee>
        <input type="" /></Marquee>

Example

<html>
    <head>
        <title>Marquee Demo</title>
    </head>
    <body>
        <!--For Text-->
        <Marquee>This is the text</Marquee>
        <!--For image-->
        <Marquee>
            <img src="http://gyansangrah.com/ArticleImages/svg_circle_html5_one.jpg" />
        </Marquee>
        <!--For image-->
        <Marquee>
            <input type="checkbox" />
        </Marquee>
    </body>
</html>

Try It

Once you run the application, you get the following output: -

Picture showing the output of marquee tag in html

Direction Attribute In Marquee

Direction attributes specify in which direction, the text (image or control) will move. There are 4 possible values: -

Up (Moves content from down to up direction)
Down (Moves content from up to down direction)
Left (Moves content from right to left direction)
Right (Moves content from left to right direction)

Syntax

<Marquee direction="up|down|left|right">Content</Marquee>

Behavior Attribute In Marquee

The behavior attribute specifies the type of scrolling. There are three different values of behavior attribute: -

Scroll
Slide
Alternate

To illustrate the attribute, let me first make an assumption. My assumption is text will start scrolling from the right and goes in the left direction.

Now consider the following code.

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <!--Scroll-->
        <marquee behavior="scroll">This is the text</marquee>
        <!--Slide-->
        <marquee behavior="slide">This is the text</marquee>
        <!--Alternate-->
        <marquee behavior="alternate">This is the text</marquee>
    </body>
</html>

Try It

Loop Attribute In Marquee

The loop attribute specifies the number of times the text will move on the screen.

Syntax –

<marquee Loop="loop_count">This is the text</marquee>

In the above code, loop count specifies the number of times text will move on the screen. If you don’t specify this attribute then the value is infinity by default. It means text will keep on moving infinitely.

Scrollamount Attribute In Marquee

The scrollAmount attribute specifies the number of pixels the text inside the marquee tag jumps. The scrollAmount attribute impacts the speed of the marquee. More the value of ScrollAmount, the more speed the marquee is having.

Syntax

<marquee scrollAmount="scroll_amount_in_numbers">This is the text</marquee>

Scrolldelay Attribute In Marquee

Scrolldelay specifies delays between the jumps.

Syntax

<marquee scrolldelay="delay_in_numbers">This is the text</marquee>

Browser Support

Internet Explorer	Firefox	Chrome	Safari	Opera	Edge
Yes	Yes	Yes	Yes	Yes	Yes

Posted By -	Karan Gupta

Posted On -	Tuesday, November 1, 2016

Updated On -	Thursday, November 2, 2017

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**