CodesJava

Easy learning with example program codes

Marquee HTML

HTML <marquee> Tag

It is a non-standard HTML element. To scroll an image or text the HTML <marquee> tag is used. The scroll can be either horizontally or vertically, thus allowing the image or text to be scrolled up or down, or left or right automatically. With a comparison to the Netscape’s blink element, this tag was introduced in Microsoft’s Internet Explorer earlier versions.

Example:

<!DOCTYPE html>
<html>
<body>
<marquee>Hello World!!</marquee>  
</body>
</html>

Output:

Explanation:

In the above example, we have used the HTML <marquee> tag to scroll the text horizontally.

Supporting Browsers:

Chrome, IE, Firefox, Opera and Safari.

Tag Specific Attributes:

AttributeUses
behaviorTo set the behavior of the marquee to either of the scroll, slide or alternate types.
directionTo specify the direction (left, right, up or down) for scrolling content.
widthTo specify the width of the marquee in pixels or %.
heightTo specify the height of the marquee in pixels or %.
hspaceTo specify the horizontal space in pixels around the marquee.
vspaceTo specify the vertical space in pixels around the marquee.
scrolldelayTo specify the scroll delay in seconds.
scrollamountTo specify the scroll amount in number.
loopTo specify the loop for marquee content in number.
bgcolorTo specify the background color, but is deprecated now.

HTML Scroll Marquee:

By default, the scroll property exists with the HTML <marquee> tag. It allows the text to be scrolled from right to left. The scroll when reached the end of the left side, it restarts at the right side of the marquee. The text then disappears, when the loop completes.

Example:

<!DOCTYPE html>
<html>
<body>
<marquee width="50%" behavior="scroll" bgcolor="crimson">  
Hello World!! 
</marquee>   
</body>
</html>

Output:

Explanation:

In the above example, we have used the HTML Scroll Marquee, to scroll the text from right to left.

HTML Slide Marquee:

To scroll the contents to slide the entire length of the marquee, the HTML Slide Marquee can be used. To display the content permanently, it stops at the end.

Example:

<!DOCTYPE html>
<html>
<body>
<marquee width="50%" behavior="slide" bgcolor="crimson">  
Hello World!! 
</marquee>   
</body>
</html>

Output:

Explanation:

In the above example, we have used the HTML Slide Marquee, to scroll the text to slide the entire marquee length, but to stop at the end.

HTML Alternate Marquee:

To scroll the content from right to left and then to go back left to right, the HTML Alternate Marquee is used.

Example:

<!DOCTYPE html>
<html>
<body>
<marquee width="50%" behavior="alternate" bgcolor="crimson">  
Hello World!! 
</marquee>   
</body>
</html>

Output:

Explanation:

In the above example, we have used the HTML Alternate Marquee, to scroll the text from right to left and then from left to right.

Direction in HTML marquee:

We can also change the direction of the scrolling text, where the direction can be left, right, up and down.

Example:

<!DOCTYPE html>
<html>
<body>
<marquee width="50%" direction="right" bgcolor="crimson">  
Hello World!! 
</marquee>   
</body>
</html>

Output:

Explanation:

In the above example, we have used the direction attribute of the HTML Marquee, to scroll the text in the specified direction.

Nested marquee:

Example:

<!DOCTYPE html>
<html>
<body>
<marquee width="300px" height="50px" behavior="alternate" style="border:10px solid crimson">  
<marquee behavior="slide" bgcolor="yellow">  
HELLO WORLD!!
</marquee>  
</marquee>   
</body>
</html>

Output:

Explanation:

In the above example, we have used the HTML <marquee> tag inside the HTML <marquee> tag to create an HTML nested marquee.

Disadvantages of HTML marquee:

  • Because of the continuous attraction towards movement and marquee text constantly, the marquee can be distracting sometimes.
  • It is also very difficult to click the static text since Marquee text moves.
  • The text is harder to read.
Please follow and like us:
error
Posted in HTML   









Copyright © 2019 CodesJava DMCA.com Protection Status