HTML <marquee> Tag
The <marquee> tag was used to create a scrolling text marquee on a web page. This element was non-standard and is now considered deprecated, meaning it should not be used in modern web development due to inconsistencies and lack of accessibility. While it might still work in some older browsers, it's highly recommended to use CSS animations or JavaScript for similar effects.
Syntax
<marquee
behavior="scroll | slide | alternate"
bgcolor="color_name | hex_value | rgb_value"
direction="left | right | up | down"
height="pixels | %"
hspace="pixels"
loop="number | infinite"
scrollamount="pixels"
scrolldelay="milliseconds"
vspace="pixels"
width="pixels | %"
>
Content to scroll
</marquee>
Attributes
| Attribute | Value | Description | |||
|---|---|---|---|---|---|
behavior |
scroll \ |
slide \ |
alternate |
Defines the scrolling behavior: scroll (default, text scrolls in then out), slide (text scrolls in and stops), alternate (text moves back and forth). |
|
bgcolor |
color_name \ |
hex_value \ |
rgb_value |
Specifies the background color of the marquee. Use standard color names, hex codes, or RGB values. | |
direction |
left \ |
right \ |
up \ |
down |
Sets the direction of the scrolling text. |
height |
pixels \ |
% |
Specifies the height of the marquee box, in pixels or as a percentage of its parent container. | ||
hspace |
pixels |
Sets the horizontal space on the sides of the marquee text. | |||
loop |
number \ |
infinite |
Determines how many times the text will loop. infinite will make it loop continuously. |
||
scrollamount |
pixels |
Specifies the speed of scrolling by indicating how many pixels the text moves with each delay. | |||
scrolldelay |
milliseconds |
Sets the delay between each movement of the text, in milliseconds, thereby controlling scrolling speed. | |||
vspace |
pixels |
Sets the vertical space above and below the marquee text. | |||
width |
pixels \ |
% |
Specifies the width of the marquee box, in pixels or as a percentage of its parent container. |
Example
<marquee>This is a simple scrolling marquee.</marquee>
More Examples
Basic scrolling marquee with direction:
<marquee direction="right">This text scrolls from left to right.</marquee>
Marquee with custom background color and loop count
<marquee bgcolor="lightblue" loop="3">This marquee loops three times.</marquee>
Marquee with alternate behavior, height, and width
<marquee behavior="alternate" height="50" width="50%">This text will bounce back and forth.</marquee>
Marquee with custom scroll amount and delay:
<marquee scrollamount="10" scrolldelay="50">This marquee scrolls quickly.</marquee>
Marquee with vertical scroll direction:
<marquee direction="up" height="100">
This text scrolls upwards.
</marquee>
Browser Support
The <marquee> tag is not part of any web standard and has inconsistent support across browsers. While it might work in some older versions, modern browsers may not support it reliably or at all.
| Browser | Support |
|---|---|
| Chrome | Partial (mostly deprecated) |
| Edge | Partial (mostly deprecated) |
| Firefox | Partial (mostly deprecated) |
| Safari | Partial (mostly deprecated) |
| Opera | Partial (mostly deprecated) |
Notes and Tips
- Avoid using the
<marquee>tag: It is deprecated and can cause accessibility issues and inconsistent behavior across browsers. - Use CSS animations: If you need to create scrolling text or animations, use CSS animations or JavaScript instead for more robust and accessible solutions.
- Accessibility concerns: Marquees can be distracting and difficult for some users to read, especially those with cognitive or attention deficits. Avoid using them for important information.
- Alternative for simple scrolling: For a simple text scroll effect consider using a basic CSS animation or a JS library for complete control over behaviour.
- Legacy support: While you might find it working in older browsers, relying on it is not advisable for any production website.
