How To Create Marquee In Css

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.

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.