Spread the love

HTML <marquee> Tag

A <marquee> HTML Tag is a non-standard HTML element used to scroll horizontally or vertically across an image or text.

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

Marquee tags were first introduced in early versions of Microsoft’s Internet Explorer. It is compared to Netscape’s Blink Element.

Example:-

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML marquee Tag</title>
</head>
 
<body>
  <h1>This is HTML marquee Tag</h1>
  <marquee>Hi KHUSHAL</marquee>
</body>
</html>

Output:-

Hi KHUSHAL

Attribute:-

  • behavior
  • direction
  • width
  • height
  • hspace
  • vspace
  • scrolldelay
  • scrollamount
  • loop
  • bgcolor

HTML Scroll Marquee

Example:-

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML marquee Tag</title>
</head>
 
<body>
  <h1>This is HTML marquee Tag</h1>
  <marquee width="50%" behavior="scroll" bgcolor="lightblue">Hi KHUSHAL</marquee>
</body>
</html>

This is a default property. In this, we will use the bgcolor, behavior, and width attributes. This is used to scroll the text from right to left and restart the right side of the marquee when it reaches the end of the left side. The text disappears after the loop completes.

Output:-

Hi KHUSHAL

HTML Slide Marquee

In a slide marquee ( behavior=”slide” ), all content to be scrolled will slide the entire length of the marquee but will stop at the end to display the content permanently.

Example:-

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML marquee Tag</title>
</head>
 
<body>
  <h1>This is HTML marquee Tag</h1>
  <marquee width="50%" behavior="slide" bgcolor="lightblue">Hi KHUSHAL</marquee>
</body>
</html>

Output:-

Hi KHUSHAL

HTML Alternate Marquee

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

Example:-

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML marquee Tag</title>
</head>
 
<body>
  <h1>This is HTML marquee Tag</h1>
  <marquee width="222px" behavior="alternate" bgcolor="lightblue">Hi KHUSHAL</marquee>
</body>
</html>

Output:-

Hi KHUSHAL

Direction in HTML marquee

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

Example:-

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML marquee Tag</title>
</head>
 
<body>
  <h1>This is HTML marquee Tag</h1>
  <p><strong>direction right</strong></p>
  <marquee width="222px" height="100px"  direction="right" bgcolor="lightblue">Hi KHUSHAL</marquee> <br><br>
  <p><strong>direction left</strong></p>
  <marquee width="222px" height="100px"  direction="left" bgcolor="lightblue">Hi KHUSHAL</marquee> <br><br>
  <p><strong>direction up</strong></p>
  <marquee width="222px" height="200px"  direction="up" bgcolor="lightblue">Hi KHUSHAL</marquee> <br><br>
  <p><strong>direction down</strong></p>
  <marquee width="222px" height="200px"  direction="down" bgcolor="lightblue">Hi KHUSHAL</marquee>
</body>
</html>

Output:-

direction right

Hi KHUSHAL

direction left

Hi KHUSHAL

direction up

Hi KHUSHAL

direction down

Hi KHUSHAL
Spread the love

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *