Marquee HTML

Marquee HTML

The Marquee HTML tag is a non-standard HTML element which is used to scroll a image or text horizontally or vertically.

In simple words, you can say that it scrolls the image or text up, down, left or right automatically.

Marquee tag was first introduced in early versions of Microsoft’s Internet Explorer. It is compared with Netscape’s blink element.


Marquee HTML Example

  1. <marquee>This is an example of html marquee </marquee>  

Test it Now

Output:

This is an example of html marquee


Supporting Browsers

Element chrome browser Chrome ie browser IE firefox browser Firefox opera browser Opera safari browser Safari
<marquee> Yes Yes Yes Yes Yes

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.

HTML Scroll Marquee

It is a by default property. It is used to scroll the text from right to left, and restarts at the right side of the marquee when it is reached to the end of left side. After the completion of loop text disappears.

  1. <marquee width=“100%” behavior=“scroll” bgcolor=“pink”>  
  2. This is an example of a scroll marquee…  
  3. </marquee>  

Test it Now

Output:

This is an example of a scroll marquee…


HTML Slide Marquee

In slide marquee, all the contents to be scrolled will slide the entire length of marquee but stops at the end to display the content permanently.

  1. <marquee width=“100%” behavior=“slide” bgcolor=“pink”>  
  2. This is an example of a slide marquee…  
  3. </marquee>  

Test it Now

Output:

This is an example of a slide marquee…


HTML Alternate Marquee

It scrolls the text from right to left and goes back left to right.

  1. <marquee width=“100%” behavior=“alternate” bgcolor=“pink”>  
  2. This is an example of a alternate marquee…  
  3. </marquee>  

Test it Now

Output:

This is an example of a alternate marquee…


Direction in HTML marquee

This is used to change the direction of scrolling text. Let’s take an example of marquee scrolling to the right. The direction can be left, right, up and down.

  1. <marquee width=“100%” direction=“right”>  
  2.  This is an example of a right direction marquee…  
  3. </marquee>  

Test it Now

Output:

This is an example of a right direction marquee…


Nested marquee example

  1. <marquee width=“400px” height=“100px” behavior=“alternate” style=“border:2px solid red”>  
  2. <marquee behavior=“alternate”>  
  3. Nested marquee…  
  4. </marquee>  
  5. </marquee>  

Test it Now 

Nested marquee…


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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s