HTML <marquee> Tag

The <marquee> is a non-standard HTML tag which was used to create a scrolling text or an image.

It was used to make the text/image scroll horizontally across or vertically down the web page.

Syntax

The <marquee> element comes in pairs. It means that the tag has opening (<marquee>) and closing (</marquee>) elements.

Note: The <marquee> element is a non-standard HTML element. If you use this element, your pages or apps may be broken.

Example

<!DOCTYPE html>
<html>
   <body>
      <marquee>A scrolling text created with HTML Marquee element.</marquee>
   </body>
</html>

Result


A scrolling text created with HTML Marquee element.


Use direction attribute of <marquee> element to change the direction of the text/image. See anothe example where the text scrolls from up to down.

Example

<!DOCTYPE html>
<html>
   <body>
      <marquee direction="down"> A scrolling text created with HTML Marquee element.</marquee>
   </body>
</html>

Result


A scrolling text created with HTML Marquee element.


Now let's see an example of using <marquee> element for setting a scrolling image:

Example

<html>
<head>
</head>
<body>
  <marquee behavior="scroll" direction="up">
    <img src="/uploads/media/default/0001/01/910a300bcc9d9885ea035805ac6cac5d719bc43e.jpeg" width="120" height="80" alt="W3docs" />
  </marquee>
</body>
</html>

Recommendation: Use CSS width and background-color properties to style the <marquee> element.

Example

<!DOCTYPE html>
<html>
   <body>
            <style> 
marquee {
             width: 100%;
             background-color: lightblue;
         }
      </style>
      <marquee direction="scroll"> A scrolling text created with HTML Marquee element and styled with CSS properties.</marquee>
   </body>
</html>

Attributes:

The following attributes can be used to adjust the appearance of the <marquee> element.

Attributes Value Description
behavior scroll
slide
alternate
Defines the scrolling type.
bgcolor rgb(x,x,x)
#xxxxxx
colorname
Is used to give a background color.
direction up
down
left
right
Sets the direction for the scrolling content.
height pixels
%
Defines the marquee's height.
hspace pixels Defines horizontal space around the marquee.
loop number Defines how many times the content will scroll. If we don't define this, the content will scroll forever.
scrollamount number Defines the scrolling amount at each interval in pixels. Default value is 6.
scrolldelay seconds Defines how long delay will be between each jump. The default value is 85 and smaller amounts than 60 will be ignored.
truespeed seconds Is used to delay the scroll lesser than 60.
vspace pixels Defines vertical space around the marquee.
width pixels
%
Defines the marquee's width.

The <marquee> tag also supports the Global Attributes.