HTML – EMBED MULTIMED
If you'd like to explore HTML-only marquees without involving CSS or JavaScript, you can rely solely on the <marquee> tag and its attributes. Here are some additional examples to maximize its functionality.
HTML marquees are a way to create scrolling text or images on a webpage. They were widely used in the early days of web development to add visual interest to websites, but they are now considered outdated and not recommended for modern web design due to accessibility and usability concerns. However, they can still be used in certain contexts for nostalgic effects or fun projects.
Basic Syntax
The <marquee> tag is used to create a scrolling effect. It has been deprecated in HTML5, but it is still supported by some browsers.
1. Basic Marquee with Text
<!DOCTYPE html>
<html>
<body>
<marquee>Simple scrolling text marquee.</marquee>
</body>
</html>
This will produce the following result:
2. Marquee with a Specific Direction
- Scroll Up
<!DOCTYPE html>
<html>
<body>
<marquee direction="up" height="100px">Scrolling upwards!</marquee>
</body>
</html>
This will produce the following result:
- Scroll Down
<!DOCTYPE html>
<html>
<body>
<marquee direction="down" height="100px">Scrolling downwards!</marquee>
</body>
</html>
This will produce the following result:
3. Marquee with Scrolling Speed
- Use the
scrollamountattribute to control the speed.
<!DOCTYPE html>
<html>
<body>
<marquee scrollamount="2">Slow scrolling marquee.</marquee>
<marquee scrollamount="10">Fast scrolling marquee.</marquee>
</body>
</html>
This will produce the following result:
4. Marquee with Background Color
- Add the
bgcolorattribute to give the marquee a background.
<!DOCTYPE html>
<html>
<body>
<marquee bgcolor="yellow">Marquee with a yellow background.</marquee>
</body>
</html>
This will produce the following result:
5. Marquee with Loop Control
- Use the
loopattribute to specify how many times the marquee should scroll.
<!DOCTYPE html>
<html>
<body>
<marquee loop="3">This marquee will scroll only three times.</marquee>
<marquee loop="-1">This marquee will scroll forever!</marquee>
</body>
</html>
This will produce the following result:
6. Marquee with Width and Height
- Set the dimensions of the marquee with the
widthandheightattributes.
<!DOCTYPE html>
<html>
<body>
<marquee width="200px" height="50px">Marquee with specific dimensions.</marquee>
</body>
</html>
This will produce the following result:
7. Alternate Behavior
- The
behavior="alternate"attribute makes the content bounce back and forth.
<!DOCTYPE html>
<html>
<body>
<marquee behavior="alternate">Bouncing marquee text!</marquee>
</body>
</html>
This will produce the following result:
8. Combining Attributes
- Combine multiple attributes for customized effects.
<!DOCTYPE html>
<html>
<body>
<marquee direction="right" scrollamount="5" bgcolor="lightblue" width="300px" height="50px">
Customized marquee scrolling right.
</marquee>
</body>
</html>
This will produce the following result:
9. Marquee with Images
- Marquees can scroll images just like text.
<!DOCTYPE html>
<html>
<body>
<marquee>
<img src="logo.png" alt="Sample Image">
<img src="logo.png" alt="Another Image">
</marquee>
</body>
</html>
This will produce the following result:
10. Marquee with Mixed Content
- Combine text and images inside a single marquee.
<!DOCTYPE html>
<html>
<body>
<marquee direction="left" scrollamount="8">
🌟 Welcome to the scrolling marquee! 🌟
<img src="logo.png" alt="Star Image">
🚀 Enjoy the scrolling effect! 🚀
</marquee>
</body>
</html>
This will produce the following result:
11. Nested Marquees
- Create marquees within marquees for layered scrolling effects.
<!DOCTYPE html>
<html>
<body>
<marquee direction="right">
Outer marquee scrolling right.
<marquee direction="left">
Inner marquee scrolling left.
</marquee>
</marquee>
</body>
</html>
This will produce the following result:
12. Marquee with Pause on Hover
While not explicitly part of the <marquee> tag, some browsers (like Internet Explorer) support pausing when hovering by default. You can add this feature by instructing users to hover over the text.
<!DOCTYPE html>
<html>
<body>
<marquee behavior="scroll">Hover over this text to pause the scrolling.</marquee>
</body>
</html>
This will produce the following result:
<!DOCTYPE html>
<html>
<body>
<marquee direction="up" height="100px" scrollamount="2">
Line 1<br>
Line 2<br>
Line 3<br>
Line 4<br>
</marquee>
</body>
</html>
This will produce the following result:
14. Marquee with Tables
Use tables inside marquees for more structured content.
<!DOCTYPE html>
<html>
<body>
<marquee scrollamount="5">
<table border="1">
<tr>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<td>Player 1</td>
<td>100</td>
</tr>
<tr>
<td>Player 2</td>
<td>90</td>
</tr>
</table>
</marquee>
</body>
</html>
This will produce the following result:
<marquee> tag attributes and their descriptions:| Attribute | Description | Values | Default Value |
|---|
| behavior | Specifies how the content should scroll. | - scroll: Continuous scrolling (default). - slide: Stops at the end. - alternate: Bounces back and forth. | scroll |
| direction | Defines the direction in which the marquee content scrolls. | - left: Scrolls left (default). - right: Scrolls right. - up: Scrolls upward. - down: Scrolls downward. | left |
| scrollamount | Sets the speed of the scrolling. Higher values increase speed. | Integer value (e.g., 1, 10, 20). | 6 |
| scrolldelay | Adds a delay (in milliseconds) between each scroll movement. | Integer value (e.g., 100, 200). | 85 |
| loop | Specifies the number of times the marquee content will scroll. | - Positive integers (e.g., 1, 3). - -1 or infinite: Scrolls endlessly. | -1 |
| bgcolor | Sets the background color of the marquee. | Any valid color name (e.g., red, blue) or hexadecimal color code (e.g., #FF0000). | Transparent |
| height | Specifies the height of the marquee container. | - Length (e.g., 50px, 20%). | Browser default |
| width | Specifies the width of the marquee container. | - Length (e.g., 200px, 50%). | Browser default |
| hspace | Sets the horizontal space (margin) around the marquee. | Integer value (e.g., 10, 50). | 0 |
| vspace | Sets the vertical space (margin) around the marquee. | Integer value (e.g., 10, 50). | 0 |
(Frequently Asked Questions) section about the <marquee>
Q 1. What is the <marquee> tag?
Answer: The <marquee> tag is an HTML element used to create scrolling text or images on a webpage. It allows content to move horizontally or vertically across the screen.
Q 2. Is the <marquee> tag still supported?
Answer: No, the <marquee> tag is deprecated in HTML5 and is not recommended for modern web development. It might still work in some browsers, but future browser versions may remove support.
Q 3. Why is the <marquee> tag deprecated?
Answer: The <marquee> tag is deprecated because:
- It doesn't follow modern web accessibility standards.
- It lacks flexibility compared to CSS and JavaScript animations.
- It can create usability issues for users sensitive to motion.
Q 4. What are alternatives to <marquee>?
Answer: To replace <marquee>, use:
- CSS animations (e.g.,
@keyframes) for modern, flexible scrolling effects. - JavaScript libraries like jQuery or custom scripts for advanced behavior.
- Example with CSS:
<div class="marquee">
Scrolling text with CSS!
</div>
<style>
.marquee {
width: 100%;
overflow: hidden;
white-space: nowrap;
animation: scroll 10s linear infinite;
}
@keyframes scroll {
from { transform: translateX(100%); }
to { transform: translateX(-100%); }
}
</style>
Q 5. What attributes are available for <marquee>?
Answer: The <marquee> tag supports attributes like:
direction(left, right, up, down)behavior(scroll, slide, alternate)scrollamount(speed)scrolldelay(delay between movements)loop(number of iterations)bgcolor(background color)width,height,hspace,vspace(dimensions and spacing)
Q 6. Can I use images inside a <marquee>?
Answer: Yes, images can scroll inside a <marquee>. Example:
<marquee>
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
</marquee>
Q 7. Can a <marquee> scroll both horizontally and vertically?
Answer: The <marquee> tag doesn’t support diagonal scrolling directly, but you can simulate it using nested marquees:
<marquee direction="right">
<marquee direction="up">Diagonal Scrolling</marquee>
</marquee>
Q 8. Does the <marquee> tag support pausing?
Answer: The <marquee> tag doesn't natively support pausing. However, hovering over the marquee pauses scrolling in some browsers.
Q 9. What browsers support the <marquee> tag?
Answer: Most modern browsers still support <marquee>, but its behavior can vary, and future support isn't guaranteed. It works better in older browsers like Internet Explorer.
Q 10. Does the <marquee> tag affect accessibility?
Answer: Yes, it can:
- People with motion sensitivity may find the movement distracting or uncomfortable.
- Screen readers may not handle it properly.
- Modern alternatives (CSS/JavaScript) are more accessible.