The HTML marquee tag is a legacy feature that enables text or images to scroll or slide horizontally or vertically across a web page, creating a moving effect. Despite being outdated and generally discouraged in modern web design due to its lack of accessibility and control, it continues to intrigue with its simple way of adding motion to web content.
In this blog, we will learn about marquee tag in HTML. We will learn about core concepts, real-world applications and much more.
What is marquee tag in html?
The HTML <marquee> tag is used to create scrolling images or text in web pages. It helps to scroll either from horizontally left to right or right to left, or vertically bottom to top or top to bottom.
Example
Let us look at the example to understand marquee tag in HTML:
<marquee behavior="scroll" direction="left"> This text is scrolling from right to left using the marquee tag. </marquee>
</body> </html>
Explanation:
In this example, we have created a webpage with a heading and a <marquee> tag that makes the enclosed text scroll from right to left. The behavior attribute defines the scrolling behavior, and the direction attribute specifies the scrolling direction.
Output:
Global Attributes
The <marquee> tag in HTML supports various global attributes that can be used to modify its behavior. Here are some common global attributes for the <marquee> tag:
id: Specifies a unique id for the element.
class: Assigns one or more class names to the element, which can be used for styling.
style: Defines inline CSS styles for the element.
title: Adds a title to the element, often displayed as a tooltip.
lang: Specifies the language of the element's content.
dir: Sets the text direction, such as "ltr" for left-to-right or "rtl" for right-to-left.
These attributes are part of the global attributes applicable to most HTML elements and can be used with the <marquee> tag for customization and styling.
Specific Attributes
There are some specific attributes that provide control over the appearance and behavior of the <marquee> element.
Attribute
Value(s)
Description
behavior
scroll, slide, alternate
Defines the scrolling behavior of the marquee.
direction
left, right, up, down
Sets the direction of the scrolling.
scrollamount
Numeric value
Specifies the speed of the scrolling.
scrolldelay
Numeric value
Defines the delay between each scroll iteration.
width
Numeric value or percentage
Sets the width of the marquee.
height
Numeric value or percentage
Sets the height of the marquee.
loop
Numeric value or infinite
Specifies the number of times the marquee should loop.
Event Attributes
The <marquee> tag in HTML supports various event attributes that allow you to execute JavaScript code in response to specific events. Here are some commonly used event attributes for the <marquee> tag:
onstart: <marquee onstart="script">, it defines a script to be run when the marquee starts scrolling.
onfinish: <marquee onfinish="script">, it specifies a script to be run when the marquee has finished scrolling.
onmouseover: <marquee onmouseover="script">, it defines a script to be run when the mouse pointer is over the marquee.
onmouseout: <marquee onmouseout="script">, it specifies a script to be run when the mouse pointer leaves the marquee.
Supported Browsers
The <marquee> tag is supported by most web browsers, but it's considered outdated, and its usage is discouraged. It may not be fully supported in some modern browsers. For better compatibility and adherence to web standards, CSS animations or JavaScript are recommended over the <marquee> tag.
The browsers that are mentioned below still supports the <marquee> tag:
Chrome
Firefox
Safari, and
Microsoft Edge
Frequently Asked Questions
What is marquee direction?
Marquee direction specifies the direction in which the content within a marquee element scrolls. Common values include "left," "right," "up," and "down." It controls the movement of text or images, enhancing visual dynamics on a webpage.
What is marquee in HTML with example?
The <marquee> tag in HTML is used for creating scrolling content. Example: <marquee behavior="scroll">Scrolling Text</marquee>.
Is marquee still used in HTML?
The <marquee> tag is outdated, and its usage is discouraged in modern web development. CSS is preferred for achieving similar effects.
What is a marquee display?
A marquee display refers to the visual effect of scrolling content, commonly seen in older websites, where text or images move horizontally or vertically.
Conclusion
The marquee tag in HTML offers a glimpse into the early days of web design, showcasing how simple effects were achieved. However, as web design has matured, the marquee tag has been left behind in favor of more robust, accessible, and standards-compliant methods like CSS animations and JavaScript.
116+ registered 