Categories
Learn HTML

HTML: marquee tag

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:

  1. id: Specifies a unique identifier for the element.
  2. class: Specifies one or more class names for the element (for styling purposes).
  3. style: Specifies inline CSS styles for the element.
  4. title: Specifies extra information about the element (displayed as a tooltip).
  5. dir: Specifies the direction of the scrolling content (“left”, “right”, “up”, or “down”).
  6. lang: Specifies the language of the element’s content.
  7. accesskey: Specifies a keyboard shortcut for the element.
  8. tabindex: Specifies the tab order of the element.
  9. hidden: Specifies that the element should be hidden from the user.
  10. 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:

  1. onstart: Specifies a script to be executed when the marquee starts scrolling.
  2. onfinish: Specifies a script to be executed when the marquee has finished scrolling.
  3. onmouseover: Specifies a script to be executed when the mouse pointer is moved over the marquee.
  4. 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:

  1. behavior: Specifies the behavior of the marquee (“scroll” or “slide”).
  2. loop: Specifies the number of times the marquee should repeat. A value of “-1” means the marquee will repeat indefinitely.
  3. scrollamount: Specifies the speed of the scrolling content in pixels per second.
  4. scrolldelay: Specifies the delay between each scroll movement in milliseconds.
  5. truespeed: Specifies whether the scrollamount value should be interpreted as a true speed or a delay between movements.
  6. width: Specifies the width of the marquee.
  7. 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:

  1. 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
});
  1. 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:

  1. Chrome
  2. Internet Explorer (IE)
  3. Opera
  4. Safari (WebKit)
  5. Firefox (Gecko)
  6. Android
  7. Firefox Mobile (Gecko)
  8. Edge Mobile
  9. Opera Mobile
  10. 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.

  • HTML5
  • HTML4
  • XHTML

We will discuss the HTML marquee tag below, with some examples of how to use the marquee tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1.

  1. HTML5
  2. HTML4
  3. XHTML

What are the major differences between HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1 Document?

 

HTML5 Document

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.