The
<marquee>tag in HTML was used to create scrolling text or images that move horizontally or vertically across a webpage.
It was often used to attract attention with moving announcements, news tickers, or advertisements.
Note: The<marquee>tag is deprecated in HTML5 and should not be used in modern web development.
The same effect can be achieved using CSS animations or JavaScript for better control and accessibility.
Syntax
<marquee direction="left" behavior="scroll" scrollamount="6">
Scrolling text goes here...
</marquee>Attributes
| Attribute | Description | Possible Values |
|---|---|---|
| behavior | Defines how the marquee text scrolls. | scroll (default), slide, alternate |
| direction | Defines the direction of scrolling. | left, right, up, down |
| scrollamount | Sets the speed of scrolling (higher = faster). | Numeric value (e.g., 1, 10) |
| scrolldelay | Defines the delay between each scroll movement (in milliseconds). | Numeric value |
| loop | Sets how many times the marquee scrolls. | Number, or infinite |
| bgcolor | Sets the background color of the marquee area. | Color name or hex code |
| width | Defines the width of the marquee. | Pixel or percentage value |
| height | Defines the height of the marquee. | Pixel or percentage value |
| hspace | Adds horizontal space around the marquee. | Numeric value |
| vspace | Adds vertical space around the marquee. | Numeric value |
Example
<!DOCTYPE html>
<html>
<head>
<title>Example of marquee Tag</title>
</head>
<body>
<h2>Marquee Tag Example</h2>
<marquee behavior="scroll" direction="left" scrollamount="5">
Welcome to HTML5andCSS3.org — Learn HTML and CSS easily!
</marquee>
<marquee behavior="alternate" direction="up" height="100" scrollamount="3" bgcolor="#e0f7fa">
This text bounces vertically up and down!
</marquee>
</body>
</html>Output
Browser Output
When opened in a browser:
- The first marquee scrolls text continuously from right to left.
- The second marquee makes the text bounce up and down within a light blue box.
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ⚠️Partial | ⚠️Partial | ⚠️Partial | ⚠️Partial | ⚠️Partial | ✅Yes |
| Browser | Support | Notes |
|---|---|---|
| Chrome | ⚠️ Partial | Works, but deprecated |
| Edge | ⚠️ Partial | Supported for backward compatibility |
| Firefox | ⚠️ Partial | Supported with warnings |
| Safari | ⚠️ Partial | Still works but not standard |
| Opera | ⚠️ Partial | Works, but discouraged |
| Internet Explorer | ✅ Full | Originally designed for IE 4+ |
Notes
- The
<marquee>tag is non-standard and not part of the official HTML5 specification. - It can cause accessibility and usability issues for screen readers and users with motion sensitivity.
- Use CSS animations instead. For example:
<style>
.scroll-text {
display: inline-block;
white-space: nowrap;
animation: scroll-left 10s linear infinite;
}
@keyframes scroll-left {
from { transform: translateX(100%); }
to { transform: translateX(-100%); }
}
</style>
<div class="scroll-text">This is a CSS-based scrolling text!</div>Conclusion
The <marquee> tag was once a popular way to add scrolling effects to text or images, but it is now deprecated and obsolete in HTML5.
Modern web developers should use CSS animations or JavaScript for smooth, accessible scrolling effects.
