Reimplementing Deprecated HTML Tags as Custom Elements

By Alex Riviere

Elevator Pitch

HTML 4 deprecated many beloved tags such as <blink>, <font>, and <marquee>. We’ll cover a short history of why, and then how to implement these tags on your own using Custom Elements (aka Web Components) and how to also make them more accessible!

Description

When I was first dipping my toes into web development, there was a wonderful magical place online called GeoCities. This site came around during a very volatile period of browser growth and web standardization and many sites that were on GeoCities had a unique style, in part due to limitations of the web platform at the time, as well as just the freedom of a new medium.

HTML 4 deprecated many beloved tags from this period, such as <blink>, <font>, and <marquee>. I know I feel nostalgic for this period, and while you can technically still use these elements, the accessibility of them as well as the continuing browser support is rather lacking. I set out to make a Custom Element library that will faithfully reimplement these deprecated elements and makes them more accessible as well as more powerful.

We’ll cover a short history of the early internet, and then how to implement some of these tags on your own using Custom Elements (aka Web Components) and how to also make them more accessible based on what I’ve learned from making the geo-elements library.

Notes

I have been working on the geo-elements library coming up on a year on my twitch stream. I will only briefly touch on my library, but I will cover how to implement the blink tag, the background tag (based on the background and bgcolor attributes on the body tag), and how to implement a simple marquee tag, and how to bake accessibility into it.

I have already given this talk once at Stir Trek and will be giving it again at the end of July at THAT Conference.