When building a website, you might want to draw attention to certain text by making it scroll across the screen. A popular way to achieve this in older HTML is by using the <marquee> tag. Although the <marquee> element is considered obsolete and not recommended for modern web development, it’s still useful in some cases and can be used with older websites or when creating fun, playful web elements.
In this blog post, we’ll cover how to use the <marquee> tag in HTML to display scrolling text messages. We’ll also look at how you can customize the scrolling speed, direction, and appearance of the text. By the end of this guide, you’ll have a good understanding of how to make your text scroll smoothly across your webpage.
What Is the <marquee> Tag?
The <marquee> tag in HTML is used to create a scrolling effect for text or images across the screen. This tag is deprecated in HTML5, meaning it’s no longer part of the modern HTML specification and has limited support in newer browsers. However, it still works in many older browsers and some current ones.
Basic Syntax:
<marquee>Scrolling text goes here</marquee>This simple example will make the text “Scrolling text goes here” move across the screen from right to left by default.
Step-by-Step Example: How to Create Scrolling Text
Here’s a basic example of how to use the <marquee> tag to show scrolling text on your webpage.
Example 1: Basic Scrolling Text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Scrolling Text</title>
</head>
<body>
<marquee>Welcome to My Website!</marquee>
</body>
</html>Explanation:
In this code, the text “Welcome to My Website!” will scroll from right to left. This is the default behavior of the <marquee> tag.
Customizing the <marquee> Tag
While the basic scrolling effect is straightforward, you can customize the behavior of the <marquee> tag to suit your needs. Below are some common attributes you can use to control the scroll speed, direction, and more.
1. Change the Scroll Direction
By default, text scrolls from right to left. You can change the scroll direction by using the direction attribute.
<marquee direction="right">Scrolling from left to right</marquee>This will make the text scroll from left to right.
2. Adjusting the Scroll Speed
To control how fast the text scrolls, you can use the scrollamount attribute. The higher the number, the faster the text will scroll.
<marquee scrollamount="10">Faster scrolling text</marquee>3. Looping the Text Continuously
The default behavior of the <marquee> tag is to scroll the text in an infinite loop. However, you can limit the number of times the text scrolls by using the loop attribute.
<marquee loop="5">This will scroll 5 times</marquee>4. Controlling the Behavior of the Scrolling Text
The behavior attribute lets you control how the text scrolls. You can set it to scroll, slide, or alternate.
- scroll: The text will scroll in the specified direction (default behavior).
- slide: The text will scroll in and stop.
- alternate: The text will bounce back and forth between the left and right edges of the marquee.
<marquee behavior="alternate">Bouncing text</marquee>Putting It All Together: Full Example
Here’s an example that combines different customizations for the <marquee> tag.
Example 2: Customized Scrolling Text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Scrolling Text</title>
</head>
<body>
<h1>Customized Scrolling Text Example</h1>
<marquee direction="right" scrollamount="10" behavior="alternate" loop="3">
Welcome to My Interactive Webpage!
</marquee>
</body>
</html>Explanation:
- Direction: The text scrolls from left to right.
- Scroll Speed: Set to
10for a faster scroll. - Behavior: The text alternates between scrolling left and right, bouncing off the edges.
- Loop: The text will scroll three times before stopping.
Best Practices When Using the <marquee> Tag
While the <marquee> tag is simple to use, it’s important to note that it is deprecated in HTML5 and should be avoided in modern web development. If you need a similar effect, it’s better to use CSS animations or JavaScript for more control and browser compatibility. Here are a few alternatives:
1. Using CSS Animations
@keyframes scroll {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
.marquee {
white-space: nowrap;
overflow: hidden;
display: block;
animation: scroll 10s linear infinite;
}<div class="marquee">This text scrolls with CSS!</div>2. Using JavaScript for More Control
<div id="scrollingText">This text scrolls with JavaScript!</div>
<script>
const scrollingText = document.getElementById('scrollingText');
let position = 0;
function scrollText() {
position += 1;
scrollingText.style.transform = `translateX(${position}px)`;
if (position > window.innerWidth) {
position = -scrollingText.offsetWidth;
}
requestAnimationFrame(scrollText);
}
scrollText();
</script>Conclusion
The <marquee> tag is a quick and easy way to create scrolling text in HTML, but it’s important to understand that it has been deprecated in HTML5. While it may still work in some browsers, you should consider using CSS or JavaScript for a more modern and flexible approach to scrolling text.
Whether you’re using it for fun or experimenting with an older project, the <marquee> tag can still be useful in certain cases. Just remember to explore modern alternatives for better performance and compatibility.