HTML: <marquee> tag
In this series of learning HTML, we will teach you how to use HTML marquee tag with proper syntax and lots of examples. Let’s start on the HTML marquee tag.
Description of HTML marquee tag
The HTML “marquee” tag is an older and now deprecated tag that was used to create scrolling text or images on a web page. When used, the content inside the “marquee” tag would scroll either horizontally or vertically across the page, depending on how it was configured.
The syntax for using the “marquee” tag is as follows:
<marquee direction="up|down|left|right" behavior="scroll|slide|alternate" scrollamount="number" scrolldelay="number" loop="number">
Content to be scrolled goes here
</marquee>
The “direction” attribute specifies the direction in which the content should scroll, either up, down, left, or right. The “behavior” attribute specifies how the scrolling should behave, either as a continuous scroll, a sliding motion, or alternating between the two. The “scrollamount” attribute determines the speed of the scroll, while the “scrolldelay” attribute determines the delay between scrolls. Finally, the “loop” attribute determines how many times the scrolling content should repeat (default is infinite).
It’s important to note that the “marquee” tag is deprecated and should not be used in modern web development. Instead, it’s recommended to use modern CSS animations or JavaScript to achieve similar effects in a more efficient and maintainable way.
Syntax of HTML marquee tag
The <marquee>
tag in HTML is used to create a scrolling text or image effect on a webpage. Here’s the basic syntax of the <marquee>
tag:
<marquee>Scrolling text or image</marquee>
You can also add various attributes to the <marquee>
tag to control its behavior, such as direction, scroll speed, and more. Here’s an example of using some of these attributes:
<marquee direction="up" scrollamount="5">Scrolling text</marquee>
In this example, the direction
attribute is set to “up” to make the text scroll vertically, and the scrollamount
attribute is set to “5” to control the speed of the scroll. Note that the <marquee>
tag is not supported in HTML5 and should not be used in modern web development. Instead, CSS animations can be used to achieve similar effects.
Global Attributes
The marquee
tag is an HTML element used to create scrolling text or images on a web page. It is not recommended to use this tag as it is deprecated and may not be supported in some web browsers. Additionally, it can be annoying to users and may cause accessibility issues.
However, if you still want to use the marquee
tag, there are some global attributes you can use with it:
id
: Specifies a unique identifier for the element.class
: Specifies one or more class names for the element (for styling purposes).style
: Specifies inline CSS styles for the element.title
: Specifies extra information about the element (displayed as a tooltip).dir
: Specifies the direction of the scrolling content (“left”, “right”, “up”, or “down”).lang
: Specifies the language of the element’s content.accesskey
: Specifies a keyboard shortcut for the element.tabindex
: Specifies the tab order of the element.hidden
: Specifies that the element should be hidden from the user.data-*
: Attributes used to store custom data private to the page or application.
Example usage:
<marquee id="my-marquee" class="scroll-text" direction="up" style="color:red;">This text will scroll up</marquee>
Event Attributes
The marquee
tag is an HTML element used to create scrolling text or images on a web page. It is not recommended to use this tag as it is deprecated and may not be supported in some web browsers. Additionally, it can be annoying to users and may cause accessibility issues.
However, if you still want to use the marquee
tag, there are some event attributes you can use with it:
onstart
: Specifies a script to be executed when the marquee starts scrolling.onfinish
: Specifies a script to be executed when the marquee has finished scrolling.onmouseover
: Specifies a script to be executed when the mouse pointer is moved over the marquee.onmouseout
: Specifies a script to be executed when the mouse pointer is moved out of the marquee.
Example usage:
<marquee onstart="startFunction()" onfinish="finishFunction()">This text will scroll</marquee>
Please note that using inline event attributes is not recommended and it is better to separate the JavaScript code from the HTML markup. You can use event listeners to attach event handlers to the element in a separate JavaScript file or script tag.
Other Attributes
In addition to the global and event attributes, the marquee
tag also supports the following non-standard attributes:
behavior
: Specifies the behavior of the marquee (“scroll” or “slide”).loop
: Specifies the number of times the marquee should repeat. A value of “-1” means the marquee will repeat indefinitely.scrollamount
: Specifies the speed of the scrolling content in pixels per second.scrolldelay
: Specifies the delay between each scroll movement in milliseconds.truespeed
: Specifies whether thescrollamount
value should be interpreted as a true speed or a delay between movements.width
: Specifies the width of the marquee.height
: Specifies the height of the marquee.
Example usage:
<marquee behavior="scroll" loop="3" scrollamount="5" scrolldelay="50" truespeed width="300" height="100">This text will scroll three times.</marquee>
Please note that these attributes are not part of the HTML standard and may not be supported by all web browsers. Additionally, it is not recommended to use the marquee
tag or its non-standard attributes as they can cause accessibility and usability issues for users.
Event Handlers
The <marquee> tag has the following event handlers:
The marquee
tag is an HTML element used to create scrolling text or images on a web page. However, it is not recommended to use this tag as it has been deprecated in HTML 4.01 and removed from HTML5. Additionally, the marquee
tag does not have any specific event handlers.
However, you can still use JavaScript to attach event handlers to the marquee
element using the standard DOM event model. Here are some examples of how to do this:
- Using the
addEventListener
method:
var marquee = document.querySelector('marquee');
marquee.addEventListener('mouseover', function() {
// Do something when the mouse pointer is moved over the marquee
});
marquee.addEventListener('mouseout', function() {
// Do something when the mouse pointer is moved out of the marquee
});
- Using inline event handlers:
<marquee onmouseover="mouseOverFunction()" onmouseout="mouseOutFunction()">This text will scroll</marquee>
Please note that inline event handlers are not recommended, as they can make the HTML code harder to read and maintain. It is better to use the addEventListener
method or similar techniques to attach event handlers to HTML elements in a separate JavaScript file or script tag. Additionally, it is recommended to use modern and accessible techniques for animating content on your web pages instead of the marquee
tag.
Notes on HTML marquee tag
The marquee
tag is an HTML element used to create scrolling text or images on a web page. However, it is not recommended to use this tag as it has been deprecated in HTML 4.01 and removed from HTML5. The use of the marquee
tag can cause accessibility and usability issues, such as distracting or annoying users, making it difficult for them to read content, and causing problems for assistive technologies like screen readers.
Instead of using the marquee
tag, it is recommended to use CSS animations or transitions to achieve similar effects. CSS animations can be used to create a wide range of animated effects, including scrolling text and images. CSS transitions can be used to smoothly animate changes to an element’s properties, such as its position or opacity, without the need for JavaScript.
If you still want to use the marquee
tag, it is important to note that it has limited browser support, and its non-standard attributes may not be supported by all web browsers. Additionally, the marquee
tag is not part of the HTML standard, and its use may result in invalid HTML code. Therefore, it is recommended to avoid using the marquee
tag and use more modern and accessible techniques for animating content on your web pages.
Browser Compatibility
The HTML marquee tag has essential support with the following browsers:
- Chrome
- Internet Explorer (IE)
- Opera
- Safari (WebKit)
- Firefox (Gecko)
- Android
- Firefox Mobile (Gecko)
- Edge Mobile
- Opera Mobile
- Safari Mobile
Examples of HTML marquee tag
We will discuss the <marquee> tag below, exploring examples of how to use the <marquee> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.
If you created a new web page in HTML 5 Document, your <marquee> tag might look like this:
<!DOCTYPE html>
<html>
<head>
<title>Example HTML5 Document with Marquee Tag</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>Here's some scrolling text:</p>
<marquee behavior="scroll" direction="left">This text is scrolling from left to right.</marquee>
<p>And here's some more scrolling text:</p>
<marquee behavior="scroll" direction="up">This text is scrolling from top to bottom.</marquee>
</body>
</html>
In this example, we start with the <!DOCTYPE html>
declaration, which tells the browser that this is an HTML5 document.
Next, we have the <html>
tag, which contains the rest of the document.
Inside the <html>
tag, we have the <head>
tag, which contains metadata about the document such as the title, which is “Example HTML5 Document with Marquee Tag” in this case.
Inside the <head>
tag, we have the <title>
tag, which sets the title of the document as it appears in the browser’s title bar.
Next, we have the <body>
tag, which contains the visible content of the document.
Inside the <body>
tag, we have an <h1>
tag with the text “Welcome to my website!”.
After that, we have a <p>
tag with the text “Here’s some scrolling text:”. This is followed by a <marquee>
tag with the behavior
attribute set to “scroll” and the direction
attribute set to “left”. The text “This text is scrolling from left to right.” is between the opening and closing <marquee>
tags. This causes the text to scroll horizontally from left to right across the page.
Below that, we have another <p>
tag with the text “And here’s some more scrolling text:”. This is followed by another <marquee>
tag, but this time with the behavior
attribute set to “scroll” and the direction
attribute set to “up”. The text “This text is scrolling from top to bottom.” is between the opening and closing <marquee>
tags. This causes the text to scroll vertically from top to bottom on the page.
Finally, we close the <body>
and <html>
tags to complete the document. When you open this HTML file in a web browser, you should see the two blocks of scrolling text as described above.
HTML 4.01 Transitional Document
If you created a new web page in HTML 4.01 Transitional, your <marquee> tag might look like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Example HTML 4.01 Transitional Document with Marquee Tag</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>Here's some scrolling text:</p>
<marquee behavior="scroll" direction="left">This text is scrolling from left to right.</marquee>
<p>And here's some more scrolling text:</p>
<marquee behavior="scroll" direction="up">This text is scrolling from top to bottom.</marquee>
</body>
</html>
In this example, we start with the <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
declaration, which tells the browser that this is an HTML 4.01 Transitional document.
Next, we have the <html>
tag, which contains the rest of the document.
Inside the <html>
tag, we have the <head>
tag, which contains metadata about the document such as the title, which is “Example HTML 4.01 Transitional Document with Marquee Tag” in this case.
Inside the <head>
tag, we have the <title>
tag, which sets the title of the document as it appears in the browser’s title bar.
Next, we have the <body>
tag, which contains the visible content of the document.
Inside the <body>
tag, we have an <h1>
tag with the text “Welcome to my website!”.
After that, we have a <p>
tag with the text “Here’s some scrolling text:”. This is followed by a <marquee>
tag with the behavior
attribute set to “scroll” and the direction
attribute set to “left”. The text “This text is scrolling from left to right.” is between the opening and closing <marquee>
tags. This causes the text to scroll horizontally from left to right across the page.
Below that, we have another <p>
tag with the text “And here’s some more scrolling text:”. This is followed by another <marquee>
tag, but this time with the behavior
attribute set to “scroll” and the direction
attribute set to “up”. The text “This text is scrolling from top to bottom.” is between the opening and closing <marquee>
tags. This causes the text to scroll vertically from top to bottom on the page.
Finally, we close the <body>
and <html>
tags to complete the document. When you open this HTML file in a web browser, you should see the two blocks of scrolling text as described above.
XHTML 1.0 Transitional Document
If you created a new web page in XHTML 1.0 Transitional, your <marquee> tag might look like this:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example XHTML 1.0 Transitional Document with Marquee Tag</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>Here's some scrolling text:</p>
<marquee behavior="scroll" direction="left">This text is scrolling from left to right.</marquee>
<p>And here's some more scrolling text:</p>
<marquee behavior="scroll" direction="up">This text is scrolling from top to bottom.</marquee>
</body>
</html>
In this example, we start with the XML declaration, which specifies the version of XML used and the encoding used for the document.
Next, we have the <!DOCTYPE>
declaration, which specifies that this is an XHTML 1.0 Transitional document and provides a reference to the DTD.
Inside the <html>
tag, we have the xmlns
attribute, which specifies the XML namespace used for the document.
Inside the <html>
tag, we have the <head>
tag, which contains metadata about the document such as the title, which is “Example XHTML 1.0 Transitional Document with Marquee Tag” in this case.
Inside the <head>
tag, we have the <title>
tag, which sets the title of the document as it appears in the browser’s title bar.
Next, we have the <body>
tag, which contains the visible content of the document.
Inside the <body>
tag, we have an <h1>
tag with the text “Welcome to my website!”.
After that, we have a <p>
tag with the text “Here’s some scrolling text:”. This is followed by a <marquee>
tag with the behavior
attribute set to “scroll” and the direction
attribute set to “left”. The text “This text is scrolling from left to right.” is between the opening and closing <marquee>
tags. This causes the text to scroll horizontally from left to right across the page.
Below that, we have another <p>
tag with the text “And here’s some more scrolling text:”. This is followed by another <marquee>
tag, but this time with the behavior
attribute set to “scroll” and the direction
attribute set to “up”. The text “This text is scrolling from top to bottom.” is between the opening and closing <marquee>
tags. This causes the text to scroll vertically from top to bottom on the page.
Finally, we close the <body>
and <html>
tags to complete the document. When you open this XHTML file in a web browser, you should see the two blocks of scrolling text as described above.
XHTML 1.0 Strict Document
You can not use the <marquee> tag in XHTML 1.0 Strict.
XHTML 1.1 Document
You can not use the <marquee> tag in XHTML 1.1.