Yes, this is a Mothers' Day Special Blog. If you are like me you must have encountered with the <marquee> tag. Wait! let me clear you one thing, if you're not interested in the exposition of my first encounter with the <marquee> tag, feel free to skip ahead to the main content SKIP.
.
.
Remember those <marquee> texts? It was back in 2013, when I was in 8th grade, that I first encountered those scrolling, floating, or whatever-you-call-them texts. I was so amazed that I could make something literally "run" on my webpage, like those "SALE! SALE! SALE!" texts on e-commerce sites or notification banners on some government websites.
Until then, all the tags I had learned were static; nothing moved. Well, the marquee tag was also technically static, but at the time, I was so fascinated by it that I started using it everywhere. It made me feel like I was really doing something on the webpage. I used to play with the tag by adjusting its speed. As a kid, watching movement on my webpage was a next level feeling for me. Fun fact: I used to visit cyber cafes occasionally to do this weird stuff since I didn't have a computer at home. I don't know why I'm sharing this; it's unrelated to the marquee tag. But it's nostalgic to remember how I used to create beautiful cards for our parents on occasions like Mother's Day, Father's Day, or anniversaries.
.
Where is my Marquee?
.
.
A few days ago, I explored how modern websites, particularly those following modern design trends like brutalism, parallax and scrollytelling efficiently use similar effects, especially on portfolio websites. When I visited the MDN page for the tag, the first thing I saw was that it was deprecated. The tag can still be used in modern browsers, but since it's deprecated, it could be removed at any time.
.
Let's find the <marquee>?
.
.
The HTML tag allows text or images to scroll within a defined area. It can scroll in any direction: left, right, up, or down, with the default behavior moving from right to left, creating a sense of infinite linear animation.
Let's explore some of its attributes.
direction:- It defines the direction for scrolling content, which can be left, right, up, or down.-
behavior:- specify the behavior among these three types - Scroll, Slide and Alternate.- Scroll:- It’s the default value, and the text will move and overflow the border of the element.
- Slide:- the content will move normally until it hits the border of the element, unless specified otherwise.
- Alternate:- the content will move backwards at the hitting the border of the element.
loop:- defines the number of times the animation should happen. By default it’s -1 which means infinite timesscrolldelay:- sets the interval between each animation.scrollamount:- specifies speed of the animation.truespeed:- By default, scrolldelay values lower than 60 are ignored. If truespeed is present, those values are not ignored.contenteditable:- This makes the marquee an editable field and lets the users edit the content as it makes use of the user entered dynamic content.
Other than these we have some following attributes too:-
-
bgcolor:- Sets the background color -
height:- Sets the height -
width:- Sets the width -
hspace:- Sets the horizontal margin -
vspace:- Sets the vertical margin
Here is the implementation if the <marquee> tag. Consider the following code:-
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Marquee Tag Attributes</title>
<style>
marquee{
height: 42px;
border: 2px solid green;
font-size: 20px;
}
</style>
</head>
<body>
<!-- Example demonstrating direction attribute -->
<marquee direction="left">Scrolling Left: Dynamic Content</marquee>
<!-- Example demonstrating behavior attribute -->
<marquee direction="left" behavior="scroll">Scroll Behavior</marquee>
<marquee direction="left" behavior="slide">Slide Behavior</marquee>
<marquee direction="left" behavior="alternate">Alternate Behavior</marquee>
<!-- Example demonstrating loop attribute -->
<marquee direction="left" loop="2">Loop Twice</marquee>
<!-- Example demonstrating scrolldelay attribute -->
<marquee direction="left" scrolldelay="500">500ms Scroll Delay</marquee>
<!-- Example demonstrating scrollamount attribute -->
<marquee direction="left" scrollamount="5">Custom Speed: Dynamic and Controlled</marquee>
<!-- Example demonstrating truespeed attribute -->
<marquee direction="left" scrolldelay="30" truespeed>True Speed</marquee>
<!-- Example demonstrating contenteditable attribute -->
<marquee contenteditable="true">Click to edit: Customizable Content</marquee>
<!-- Other attributes -->
<marquee bgcolor="yellow">Yellow Background</marquee>
<marquee height="50px">Height: 50px</marquee>
<marquee width="200px">Width: 200px</marquee>
<marquee hspace="20">Horizontal Margin: 20px</marquee>
<marquee vspace="20">Vertical Margin: 20px</marquee>
</body>
</html>
.
Output:-
.
.
Marquee is deprecated.
.
The tag was once a classic choice of web designers and developers, and added a playful touch to HTML with its animation effects. However, it had its own set of issues and never made it to the list of standard elements. When HTML5 came into existence, W3C marked it obsolete and because of its non-semantic nature. Originally introduced by Microsoft in Internet Explorer and then the tag quickly gained traction among various browsers and consequently it resulted in inconsistent implementations and rendering across platforms.
The marquee tag was primarily about presentation rather than structure. This made it challenging to maintain consistent user experiences. Moreover, it is an obstacle for the users of assistive technologies and hence making accessibility and usability a concern. With HTML5 and CSS3 bringing in more semantic ways to create dynamic content, the tag became outdated and lost its appeal.
In response to these concerns and in line with web standards and accessibility principles, HTML5 deprecated the tag. While it still exists for backward compatibility, its usage is generally discouraged. Now-a-days developers are advised to embrace modern techniques like CSS animations and JavaScript libraries such as GSAP for crafting dynamic web content. The deprecation of the tag reflects a shift in the web designing which emphasizes accessibility, usability, and semantic markup for creating inclusive and user-friendly experiences.
.
So what next?
.
.
Even though the tag isn't as popular in today's web development, it still represents the early days of the internet. Whether you're drawn to its old-school charm or looking for newer options, exploring the tag gives you a glimpse into how web design has evolved and brings back nostalgic memories of the web.
One more thing this blog doesn't end here. We still need to explore possible use cases and possible alternative of <marquee>. So stay tuned and "Mark it!".
Now, you might be wondering why and how this blog is special for Mother's Day. I'd love to hear your thoughts. Feel free to share them in the comments below.
Top comments (0)