Marquee element

An example of an HTML marquee displaying the text "Wikipedia"

HTML
HTML and HTML5 Dynamic HTML XHTML XHTML Mobile Profile and C-HTML Canvas element Character encodings Document Object Model Font family HTML editor HTML element HTML Frames HTML5 video HTML scripting Web browser engine Quirks mode Style sheets Unicode and HTML W3C and WHATWG Web colors Web Storage Comparison of document markup languages web browsers layout engines for HTML HTML5 HTML5 Canvas HTML5 Media Non-standard HTML XHTML (1.1)
This box: view · talk · edit

The marquee tag is a non-standard HTML element which causes text to scroll up, down, left or right automatically. The tag was first introduced in early versions of Microsoft's Internet Explorer, and was compared to Netscape's blink element, as a proprietary non-standard extension to the HTML standard with usability problems. It is deprecated by the W3C and not advised by them for use in any HTML documents.

Usability problems

Marquee is distracting.^[1] The human eye is attracted to movement,^[2] and marquee text is constantly moving.

As with the blink element, because the marquee tagged images or text are not always completely visible, it can make printing such webpages to a paper hard-copy an impossible and inefficient task where the specific printed pages where the messages on screen scroll or blink have to be printed multiple times to capture all the pieces of text that could be displayed at any one given moment in time. To negate this problem, webpage designers should only use the tags to move text or images in ways that keep them always visible (like using the behavior="alternate" version of marquee which just makes text jitter back and forth but does not obscure any part of it if scrolling widths are set correctly, or using blink only on words that capture attention, but don't truly relay anything so important it can't be figured out from context (like flashing the word NEW! in front of a new item on a page).

Because marquee text moves, links within it are more difficult to click than those in static text, depending on the speed and length of the scrolling. Users only get one chance every time it scrolls past. This can easily frustrate users. To combat this, most client-side scripting allows marquees to be programmed to stop when the mouse is over them (usually with a simple onmouseover="this.stop();" command). Good design keeps links and critical information out of scrolled texts or puts another static copy of each somewhere else always onscreen and keep scrolls with links (like site or general news updates) very brief (not more than two or three virtual screen lengths maximum at a good speed like the default of 10) so that they repeat quickly. Also, scrolling text too fast can make it unreadable to some people, particularly those with visual impairments. Speed settings above default should be avoided for relaying readable text. There are many legitimate reasons to use or avoid use of the marquee tag. Web authors need to have the good sense to know when either case is present.

Attributes

Unlike its blinking counterpart, the marquee element has several attributes that can be used to control and adjust the appearance of the marquee.

Align

Uses the same syntax as the img element.

Behavior

Allows the user to set the behavior of the marquee to one of three different types:

• Scroll (default) – Scrolls the text from right-to-left, and restarts at the right side of the marquee when it has reached the left side. Text disappears when looping finishes.
• Slide – When used in absence of the 'Behavior' attribute, contents to be scrolled will slide the entire length of marquee but stops the moment it hits the end, so that the contents will be displayed. But if it is used with attribute 'Behavior' then the attribute 'Slide' will be ignored.

Loops are counted by each time it reaches each end of the marquee; a loop of 1 is different from 'Slide' attribute. when item is being scrolled with 'Slide' attribute, item will stop permanently at the end of length of the marquee, displaying the entire item. However, when an item is being scrolled without a 'Loop' attribute, the number of scrolls will be repeated according to what number 'Loop' is equal to. If 'Loop=1' then item will scroll only once and will exit the length of marquee completely, while the item being scrolled will stop would be the same as 'Slide'. By default, 'Loop=infinite' so it is not needed to code the attribute 'Loop' is you want a non-stop scroll. Note: 'Loop' will be ignored if attribute 'Behavior' is coded. Also, if 'Behavior=Alternate' and 'Loop=2' then item will go from beginning of the Marquee to the end and back to the beginning, counting a round trip as 2 loops.

Bgcolor

Sets the background color of the marquee.

Direction

Sets the direction of the marquee box to either left-to-right, right-to-left, up-to-down and down-to-up.

Width

This sets how wide the marquee should be.

Loop

This sets how many times the marquee should 'Loop' its text. Each trip counts as one loop.

Scrollamount

This is how many pixels the text moves between 'frames'. So scrollamount=1 gives you the slowest scroll speed.

Scrolldelay

This sets the amount of time, in milliseconds, between 'frames'. Much like watching a replay of a video where every frame of the video would be paused for x number of miliseconds. So, 'Scrolldelay=1000' means a slow motion where every frame lasts one thousand miliseconds or one second.

(Note: Marquee can have not just text but just about any package of item(s) such as one or more images or movie clips or animated GIFs.)

Compliance

The marquee element was first invented for Microsoft's Internet Explorer and is still supported by it. Firefox, Opera, Chrome and Safari web browsers support it for compatibility with legacy pages. The element is non-compliant HTML. CSS properties are used to achieve the same effect as specified in the Marquee Module Level 3, which is in the call for implementations stage.^[3] Similar effects can also be achieved through the use of JavaScript.^[4]

See also

• Blink element
• HTML element
• Comparison of layout engines (Non-standard HTML)

Notes

1. ^ "Glossary » marquee". Usability First. Foraker. http://www.usabilityfirst.com/glossary/marquee/. Retrieved 2010-03-14. 
2. ^ Tim Louis Macaluso (2009-05-27). "ADVERTISING: Study shows that eyes will forsake words for movement". Rochester City Newspaper. http://www.rochestercitynewspaper.com/news/articles/2009/05/ADVERTISING-Study-shows-that-eyes-will-forsake-words-for-movement/. Retrieved 2010-03-14. 
3. ^ CSS Marquee Module Level 3
4. ^ Sharp, Remy (10 September 2008). "The Silky Smooth Marquee". http://remysharp.com/2008/09/10/the-silky-smooth-marquee/. Retrieved 20 July 2005.