What happened to the Marquee HTML element?
At my first job, i was working as a Frontend Developer where i would implement all the latest and greatest technologies like React, Typescript, Webpack etc.
One day i was talking with one of the senior developers at the company about how frontend development has evolved alot and how it used to be. Frontend development where javascript was only used for validating forms and in general just simple things and not like today where the size of codebase and level of complexity it has become today in most web applications.
At one point, he mentioned that he remembered this HTML element ‘marquee’ which used to exist, but was not sure if it still works in the browser.
Quickly opening the editor and trying it out.
<marquee>Fancy</marquee>And now you have this banner going from right side to the left in an infinite linear animation.
I instantly replied “this is some 1990’s website design and user experience :D”.
Even though the element is deprecated, you can still use it in all modern browsers. But do not rely on it to be around for much longer, since it is obsolete and can be removed at anytime.
What is the Marquee element?
Marquee is a HTML element that defines an animating text to be moved in a direction within the borders of the marquee element. When you look at the specs, they have defined the animation as a ‘scroll’. You have multiple properties to control this animation.
Loop = Define how many times the animation should pass. Default is -1 which is infinite.
scrollamount = How fast should the animation go?
scrolldelay = Sets the interval between each animation.
Direction = Lets you specify which way the animation should go. Possible values are “Up”, “Down”, “Right”, “Left”.
You can actually nest marquee inside of another marquee and create this state of the art animation where the parent marquee has a direction of “up”, and the child marquee has an animation of “right” which results in following masterpierce :-)
Another property which is quite nice is the behavior property where you can pass either Slide, Scroll and Alternate.
Scroll is the default value and shows the text overflowing the borders as seen above.
Slide is moving but when it hits the end of the animation it stops.
Alternate is moving backwards the same way when it hits the end of the animation.
Combining the alternate behavior with nesting one marquee element, and you get this classic animation from the DVD screensaver.
With just some simple styling and adding the classical dvd screensaver image, you will get the classical screensaver we all know and love.
And here is the code:
This was so simple to implement, and with such little amount of code. I can see the use case of the marquee element still today, and what i’ve experienced when playing with the element was only joyful. It all looks fine to me. So that raises the question.
What happened to the Marquee Element?
When HTML5 was developed, W3C decided to mark the Marquee element as obsolete, so that developers would not use the element. Most browser still supports the element only because many sites has already implemented this page, and browsers wants to be backward compatible.
There are actually multiple reasons why this element is deprecated. The 3 major reasons is the following.
It has never been a HTML Standard element.
Since Microsoft introduced the element in Internet Explorer, it was adopted quickly by the different browsers, but never made it into the specification itself from W3C who defines all the standard element of HTML.
Seperation of concern
One of the big reason why marquee is deprecated is because the element is a ‘presentation’ element. HTML is a markup language (hence the name Hyper Text Markup Language), and is concerned with the structure of the website. Marquee element is not concerned about the structure, but is only used for presentation purposes. W3C then decided that if you wanted to achieve the same behaviour, developers should use CSS animation or javascript instead.
It’s annoying
The banner is mostly associated with advertisement, or a bad user experience where you try to get the users attention in a poorly executed way. The element is a reflection of a historical way of approaching websites where you wanted to use blinkers and banners across the pages to get the users attention. But as the UI/UX design has evolved over the years, the best practices has been established and marquee is an element that is not part of “best practices” when talking about user experience.
Although you probably not are going to use the marquee element at all, it is nice to know a little about the history of web development and the existing of the amazing marquee element.
