html Marquee tag, html css, html css tutorial for beginners, html css full course

HTML Marquee Tag

What is an HTML Marquee Tag ?

The HTML <marquee> tag is a non-standard, deprecated tag used to create scrolling text or images across a webpage. The term "marquee" refers to the way text or images can scroll horizontally or vertically in a container, much like a moving sign or ticker on a website. While it was widely used in early web design, its usage is no longer recommended due to accessibility, usability, and performance concerns. In this article, we will explore the history, syntax, attributes, and alternatives to the <marquee> tag in detail.

History and Usage of the Marquee Tag :-

The <marquee> tag was introduced by Internet Explorer in 1995. It was initially used to add simple scrolling animations to websites, often for text, images, or links. Its widespread adoption across various web browsers during the late 1990s and early 2000s made it an appealing tool for web designers looking to add dynamic elements to their pages. However, over time, the <marquee> tag became controversial. The tag's use of motion and animation, while visually engaging, raised concerns related to accessibility, especially for users with cognitive or visual impairments. Furthermore, the <marquee> tag lacked proper control and customization options, making it difficult to implement complex or smooth animations. In 2012, the HTML5 specification officially deprecated the <marquee> tag. While it still works in most browsers, it is no longer part of the official HTML standard, and developers are encouraged to use CSS or JavaScript-based solutions instead.

Syntax of the <marquee> Tag

<marquee>Text or content goes here<marquee>

This will cause the text or content inside the <marquee> tag to scroll from right to left by default. The direction, speed, and other properties of the scrolling content can be controlled using various attributes.

Common Attributes of the <marquee> Tag

1. direction: Specifies the direction of the scroll. The values can be:
left: Scrolls the content from right to left (default behavior).
right: Scrolls the content from left to right.
up: Scrolls the content from bottom to top.
down: Scrolls the content from top to bottom.

HTML Code :

<marquee direction="right">This text scrolls from left to right.</marquee>

scrollamount :-

Controls the speed of the scrolling content by specifying the number of pixels to move in each cycle. Higher values result in faster movement.

HTML Code :

<marquee scrollamount="10">This text moves faster.</marquee>

scrolldelay :-

Determines the delay (in milliseconds) between each scroll cycle. A higher value will slow down the scroll.

HTML Code :

<marquee scrolldelay="100">This text scrolls more slowly.</marquee>

loop :-

Defines the number of times the marquee should scroll. The default is infinite, meaning it will scroll endlessly.

HTML Code :

<marquee loop="3">This text scrolls three times.</marquee>

behavior :-

Defines the type of scrolling behavior. The possible values are:
scroll: The content moves across the screen (default).
slide: The content slides in and then stops.
alternate: The content moves back and forth, like a bouncing effect.

HTML Code :

<marquee behavior="alternate">This text moves back and forth.</marquee>

width and height :-

These attributes control the size of the marquee. You can set them using pixel values or percentages.

HTML Code :

<marquee width="50%" height="100">This text is in a smaller marquee box.</marquee>

Drawbacks of the <marquee> Tag:-

Accessibility Issues:-

The motion created by the marquee can be distracting or problematic for users with certain disabilities, particularly those with vestibular disorders, ADHD, or visual impairments. For these users, moving content can be overwhelming, making it hard to read or interact with the page.

Cross-browser Compatibility:-

While most browsers still support the <marquee> tag, its behavior is inconsistent, and it is not part of the official HTML specification. Over time, browsers might stop supporting the tag altogether.

Lack of Control and Flexibility:-

The <marquee7gt; tag offers limited customization options. For instance, you cannot easily control the scroll’s acceleration or deceleration, or create more complex animation effects like fading or easing.

HTML Code :

<!DOCTYPE html> <html> <head> <title>Document</title> </head> <body> <marquee direction="right"> <h1>Heading</h1></marquee> <marquee scrollamount="5"><p>This is a paragraph.</p></marquee> </body> </html>

Click the button to see the result

OUTPUT :