HTML marquee Tag: Usage and Alternatives
Table of Content:
Here is an example of using the HTML <marquee> element to create a scrolling text effect:
<span class="pln"> </span><span class="tag"><marquee</span><span class="pln"> </span><span class="atn">behavior</span><span class="pun">=</span><span class="atv">"scroll"</span><span class="pln"> </span><span class="atn">direction</span><span class="pun">=</span><span class="atv">"left"</span><span class="tag">></span><span class="pln">Welcome to my website!</span><span class="tag"></marquee></span>
This will create a horizontal scrolling text that moves from right to left across the screen. You can customize the behavior and direction of the scrolling text by modifying the values of the behavior and direction attributes.
Other optional attributes you can use with the <marquee> element include:
-
loop: The number of times the text should scroll before stopping. -
scrollamount: The speed at which the text should scroll, in pixels per second. -
scrolldelay: The delay between each scroll iteration, in milliseconds.
HTML Marquee Attributes
Marquee's element contains several attributes that are used to control and adjust the appearance of the marquee.
| Attribute | Description |
|---|---|
| behavior | It facilitates user to set the behavior of the marquee to one of the three different types: scroll, slide and alternate. |
| direction | defines direction for scrolling content. It may be left, right, up and down. |
| width | defines width of marquee in pixels or %. |
| height | defines height of marquee in pixels or %. |
| hspace | defines horizontal space in pixels around the marquee. |
| vspace | defines vertical space in pixels around the marquee. |
| scrolldelay | defines scroll delay in seconds. |
| scrollamount | defines scroll amount in number. |
| loop | defines loop for marquee content in number. |
| bgcolor | defines background color. It is now deprecated. |
Here is an example that includes all of these attributes:
<span class="pln"> </span><span class="tag"><marquee</span><span class="pln"> </span><span class="atn">behavior</span><span class="pun">=</span><span class="atv">"scroll"</span><span class="pln"> </span><span class="atn">direction</span><span class="pun">=</span><span class="atv">"left"</span><span class="pln"> </span><span class="atn">loop</span><span class="pun">=</span><span class="atv">"5"</span><span class="pln"> </span><span class="atn">scrollamount</span><span class="pun">=</span><span class="atv">"50"</span><span class="pln"> </span><span class="atn">scrolldelay</span><span class="pun">=</span><span class="atv">"1000"</span><span class="tag">></span><span class="pln">Welcome to my website!</span><span class="tag"></marquee></span>
If you will run above code, you will get below output.
This will create a horizontal scrolling text that moves from right to left across the screen, scrolls 5 times before stopping, has a scroll speed of 50 pixels per second, and has a delay of 1 second between each scroll iteration.
Disadvantages HTML marquee
1) Marquee may be distracting because human eyes are attracted towards movement and marquee text constantly.
2) Since Marquee text moves, so it is more difficult to click static text, depending on the scrolling speed.
3) It is a non-standard HTML element.
4) It draws user's attention needlessly and makes the text harder to read.