totn HTML

HTML: <marquee> tag

This HTML tutorial explains how to use the HTML element called the <marquee> tag with syntax and examples.

Description

The HTML <marquee> tag defines a scrolling text area in the HTML document that moves across the page in a horizontal or vertical direction. By default, text found within the <marquee> tag will scroll from right to left. The <marquee> tag has been deprecated in HTML5 and should no longer be used. It is recommended that you use CSS instead to create a similar scrolling effect. This tag is also commonly referred to as the <marquee> element.

Syntax

In HTML, the syntax for the <marquee> tag is:

<body>
<marquee direction="down" height="100" width="200" bgcolor="white">Scrolling text</marquee>
</body>

Sample Output

Attributes

In addition to the Global Attributes, the following is a list of attributes that are specific to the <marquee> tag:

Attribute Description HTML Compatibility
behavior The behavior of how the text scrolls. It can be one of the following values: alternate, scroll, slide HTML 4.01, Obsolete in HTML5
bgcolor Background color HTML 4.01, Obsolete in HTML5
direction Direction that the text scrolls. It can be one of the following values: left, right, up, down. The default value is left if the direction attribute is not specified. HTML 4.01, Obsolete in HTML5
height Height of the marquee (expressed in either pixels or percent) HTML 4.01, Obsolete in HTML5
hspace White space to insert to the left and right of the scrolling text (expressed in pixels) HTML 4.01, Obsolete in HTML5
loop The number of times that the text will scroll. The default value is -1 which means that the marquee will loop continuously. HTML 4.01, Obsolete in HTML5
scrollamount The amount of scrolling (in pixels) for each interval. The default value is 6 if the scrollamount is not specified HTML 4.01, Obsolete in HTML5
scrolldelay The delay in milliseconds between scrolling. The default value is 85 if the scrolldelay is not specified. If a value lower than 60 is provided, the truespeed attribute must also be used HTML 4.01, Obsolete in HTML5
truespeed Use this attribute to indicate that a scrolldelay value of 60 is allowed. Otherwise, the scrolldelay value will be rounded up to 60. HTML 4.01, Obsolete in HTML5
vspace White space to insert above and below the scrolling text (express in pixels) HTML 4.01, Obsolete in HTML5
width Width of the marquee (expressed in either pixels or percent) HTML 4.01, Obsolete in HTML5

Methods

The <marquee> tag has the following methods:

Method Description HTML Compatibility
start() Starts the text scrolling within the marquee HTML 4.01, Obsolete in HTML5
stop() Stops the text from scrolling within the marquee HTML 4.01, Obsolete in HTML5

Event Handlers

The <marquee> tag has the following event handlers:

Event Handler Description HTML Compatibility
onbounce This event fires when the behavior attribute is set to alternate and the text has reached the edge of the marquee. HTML 4.01, Obsolete in HTML5
onfinish This event fires when the loop attribute is set to a value higher than 0 and the marquee has finished looping the specified number of times. HTML 4.01, Obsolete in HTML5
onstart This event fires when the text starts to scroll. HTML 4.01, Obsolete in HTML5

Note

  • The HTML <marquee> element is found within the <body> tag.
    • Since the <marquee> tag has been deprecated in HTML5, it is recommended that you use CSS instead to create a scrolling effect.

Browser Compatibility

The <marquee> tag has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • Edge Mobile
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

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

HTML5 Document

You can not use the <marquee> tag in HTML5. Instead, use CSS properties to create a scrolling effect.

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" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML 4.01 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<marquee direction="down" height="100" width="200" bgcolor="white">Scrolling text</marquee>
</body>

</html>

In this HTML 4.01 Transitional Document example, we have created a <marquee> tag that displays a text area that is 100 pixels high by 200 pixels wide with a white background color. The scrolling text moves in a downward direction and repeats in a continuous loop.

XHTML 1.0 Transitional Document

You can not use the <marquee> tag in XHTML 1.0 Transitional.

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.

Share on: