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.
The <marquee> element is a non-standard HTML tag that was used to create scrolling text or images. It made text or images scroll horizontally across or vertically down the web page. Because of its usability problems, it was often compared with Netscape’s blink element.
The <marquee> element is a deprecated HTML tag. If you use it, your pages or apps may be broken. While deprecated, the tag still functions in most modern browsers.
Alternatives to the HTML <marquee> tag
As mentioned above, the HTML <marquee> tag is deprecated, and developers often avoid using it. Nowadays, you can achieve the same result with CSS and JavaScript. Read our snippet to learn more about this method.
Syntax
The <marquee> tag comes in pairs. The content is written between the opening (<marquee>) and closing (</marquee>) tags.
Example of using the HTML <marquee> tag:
Example of the HTML <marquee> tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
marquee{
font-size: 30px;
font-weight: 800;
color: #8ebf42;
font-family: sans-serif;
}
</style>
</head>
<body>
<marquee>A scrolling text created with HTML Marquee element.</marquee>
</body>
</html>Use the direction attribute of the <marquee> element to change the direction of the text or image. See another example where the text scrolls from top to bottom.
Example of a scrolling text:
Example of the <marquee> tag with the direction attribute
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<marquee direction="down">A scrolling text created with HTML Marquee element.</marquee>
</body>
</html>Now let's see an example of using the <marquee> element to display a scrolling image:
Example of a scrolling image:
Example of the <marquee> tag with behavior and direction attributes
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<marquee behavior="scroll" direction="up">
<img src="https://www.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="W3docs" />
</marquee>
</body>
</html>Use CSS width and background-color properties to style the <marquee> element.
Example of creating a scrolling text with the HTML <marquee> tag:
Example of how to style the HTML <marquee> tag with width and background-color properties
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<style>
marquee {
width: 100%;
padding: 10px 0;
background-color: lightblue;
}
</style>
<marquee direction="scroll">This scrolling text is 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.
| Attribute | Value | Description |
|---|---|---|
| behavior | scroll, slide, alternate | Defines the scrolling type. |
| bgcolor | rgb(x,x,x), #xxxxxx, colorname | Sets the 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 omitted, the content scrolls indefinitely. |
| scrollamount | number | Defines the scrolling amount at each interval in pixels. Default value is 6. |
| scrolldelay | milliseconds | Defines the delay between each scroll. The default value is 85. |
| truespeed | boolean | Enables consistent scrolling speed across different browsers. |
| vspace | pixels | Defines vertical space around the marquee. |
| width | pixels, % | Defines the marquee's width. |
The <marquee> tag also supports the Global attributes and Event attributes.
How to style an HTML <marquee> tag
{
"tag_name": "marquee"
}Practice
What is the purpose of the HTML marquee tag as described on the given webpage?