The World Wide Web has witnessed a fascinating evolution since its inception, marked by various technologies and features that have come and gone. Among the tradition of early web design, the HTML <marquee> tag stands out as a nostalgic symbol of animated text and images scrolling across web pages.
In this article, we will dive into understanding HTML marquee tags and its usage in web development.
During the late 1990s and early 2000s, it was very common to see websites with marquee-scrolling piece of text. Web designers were fascinated by the novelty of scrolling text and used them to draw attention to the content - be it specific announcements, greeting or featured content.
HTML Marquee
Marquee is a scrolling piece of text.
It scrolls either in horizontal or vertical direction on your web page.
<marquee> tag is used to create scrolling piece of text.
<marquee> tag has a number of attributes which are discussed below:
Attribute List
Width
It specifies the width of the marquee in number or % like 20 or 30%.
Example
<marquee width=”50%”> Marquee Example </marquee>
Height
It specifies the height of the marquee in number or % like 20 or 30%.
Example
<marquee height=”50”> Marquee Example </marquee>
Direction
It specifies the direction in which the marquee should scroll.
Values are up, down, left, right
The default value is left. i.e. text scrolls from right to left.
Example
<marquee direction = “up”> Marquee Example </marquee>
Loop
It specifies how many times the marquee should run.
The default value is infinite. You can specify the integer value to run it for the fixed number of times.
Example
<marquee loop = “5”> Marquee Example </marquee>
Bgcolor
It specifies the background color for the marquee.
It can be specified either as a color name or hexadecimal code.
Example
<marquee bgcolor = “red”> Marquee Example </marquee>
Hspace
It specifies the horizontal space around the marquee in number or % like 20 or 30%.
It means space from left and right side.
Example
<marquee hspace = “20”> Marquee Example </marquee>
Vspace
It specifies the vertical space around the marquee in number or % like 20 or 30%.
It means space from top and bottom side.
Example
<marquee vspace = “20%”> Marquee Example </marquee>
Scrolldelay
It specifies how long to wait between each jump in number like 20.
Example
<marquee scrolldelay = “10”> Marquee Example </marquee>
Scrollamount
It specifies how far to jump in number like 10. In other words, it specifies the speed of the marquee text.
Example
<marquee scrollamount = “10”> Marquee Example </marquee>
Full Example
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>This is basic example of marquee</marquee>
<hr />
<marquee width = "50%">This example will take only 50% width</marquee>
<hr />
<marquee direction = "right">This text will scroll from left to right</marquee>
<hr />
<marquee direction = "up" height="100">This text will scroll from bottom to up</marquee>
<hr />
<marquee width = "70%" bgcolor="yellow">This example will take only 70% width, yellow background color</marquee>
<hr />
<marquee bgcolor="pink" hspace="50" vspace="50">This example has space = 40 from all four sides</marquee>
<hr />
<marquee scrolldelay="300" >The text will scroll slow</marquee>
<hr />
<marquee scrollamount="20" >This text will scroll fast</marquee>
</body>
</html>
Conclusion:
The HTML <marquee> tag, with its scrolling text and animated nature, holds a special place in the hearts of those who witnessed the early days of the web. However, as web development practices advanced, the limitations and drawbacks of marquee tags became evident which has made it obsolete.
