🌀 The <marquee> Tag in HTML: Scrolling Text and Why You Should (or Shouldn’t) Use It
The <marquee> tag in HTML was originally introduced to create scrolling text or images on a web page. It may bring a nostalgic vibe from the early days of the web, but it’s important to understand both how it works and why it’s considered obsolete in modern web development.
📌 What Is the <marquee> Tag?
The <marquee> tag allows text (or other inline content) to scroll automatically within a defined area — horizontally or vertically.
📷 Basic Example
<marquee>Welcome to my website!</marquee>
🔁 This creates a simple scrolling message from right to left.
⚙️ Common Attributes
| Attribute | Description | Example Value |
|---|---|---|
direction | Scroll direction (left, right, up, down) | left |
scrollamount | Speed of the scroll (higher = faster) | 10 |
behavior | Scroll behavior (scroll, slide, alternate) | alternate |
loop | Number of times to scroll (-1 = infinite) | 3 |
bgcolor | Background color of the marquee area | #f0f0f0 |
width / height | Dimensions of the marquee box | 300px, 50% |
📷 Visual Example 2: Custom Marquee
<marquee direction="up" scrollamount="3" behavior="alternate" bgcolor="#e0f7fa" height="100px">
<p>Scrolling announcement ↑</p>
</marquee>
🧭 This scrolls the text upward and bounces back and forth (alternate).
🧩 Structure Diagram
<marquee>
└── Content to scroll (text or inline elements)
You can place <img>, <span>, or even styled <div> elements inside it.
🚫 Why <marquee> Is Obsolete
The <marquee> tag is non-standard and was deprecated in HTML5. Modern browsers still support it for backward compatibility, but its use is strongly discouraged.
⚠️ Problems with <marquee>:
- Inaccessible for screen readers.
- Doesn’t respect modern web design or responsive layouts.
- Poor support on mobile devices.
- Cannot be styled or controlled easily with CSS.
✅ Modern Alternative: CSS Animation
Instead of using <marquee>, use CSS animations:
<div class="marquee-css">
<p>This is a modern scrolling text.</p>
</div>
<style>
.marquee-css {
width: 100%;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
}
.marquee-css p {
display: inline-block;
animation: scroll-left 10s linear infinite;
}
@keyframes scroll-left {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
</style>
🎉 This gives you full control with CSS and works across all modern devices and screen sizes.
✅ Conclusion
The <marquee> tag is a relic of the early web — easy to use, but not suitable for today’s standards. If you’re building a modern, accessible, and responsive site, use CSS animations instead. However, for educational or nostalgic purposes, understanding <marquee> is still useful.