Can I write my own HTML tags?

Full article

As usual, the answer is... yes and no.

There's a standard set of HTML tags, css elements, and JavaScript code that you can use in any browser, like div and font-weight and alert, but the reason any of it works is a two-step process.

  1. Someone writes up what all those tags and styles should do, and documents them in the HTML Standard, CSS specs, ECMAScript language spec, Web API specs, etc.
  2. Someone else creates a browser that implements all those standards, so that font-weight makes your text appear bold, not colored red.

This leads to a nice, predictable experience, unlike ye olden days when IE and Netscape used to create their own proprietary tags that only worked in their own browsers. If you've been around long enough, you'll remember seeing these littered throughout the net, usually when a site only worked well in a single browser.

But now, standards and standards-compliance is the name of the game, and the differences between the major browsers are in the features they provide (sync'ing bookmarks, ad blocking, etc), not in how they display web pages. It's a win-win for everyone.

We can use the standard HTML elements, and apply the standard CSS styles to those elements...

<style type="text/css">
    div { background: #ff6; color: red; }
</style>
<div>Sample!</div>

... and we'll always get a box with a yellow background and red text.

Sample!

But... what if we don't want all our div boxes to have a yellow background? What if you want some of them to have a blue background? Just assign a class named "blue" to the div, and layer on the css...

<style type="text/css">
    div { background: #ff6; color: red; }
    div.blue { background: #6cf; }
</style>
<div>Sample!</div>
<div class="blue">Sample 2!</div>

... and the new styles are applied to the second div.

Sample!
Sample 2!

But but... what if you didn't want to keep applying that class to divs that should be blue? What if you just wanted an "angrydiv" element that displays a bright red box?

<style type="text/css">
    div { background: #ff6; color: red; }
    angrydiv { background: red; color: white; display: block; }
</style>
<div>Sample!</div>
<angrydiv>Arrrg!</angrydiv>

That's completely doable. Just create a new element, then use the standard css styles to give it the look you want.

Sample!
Arrrg!

It's interesting that this works, but it's completely predicable and works in every browser I've tried, so I imagine there's something in the specs that allows for it. If you know where, feel free to leave a comment. I'd be interested in checking it out.

The limitation here is that you can't extend existing elements, or just invent new elements that do something outside of how css can change their appearance. Like, you can't just create an "errortable" element and use that with tr and td elements inside it, because the browser uses all of those in combination, and has no idea what to do with a td if it's not nested in a standard table. Most likely, it'll just display all your text on one line instead of in a tabular format.

But css can do a lot. You can have div's that behave much like tables,then create an errortable, errorrow, etc. I'm not saying that's a great idea. In fact, it doesn't offer much of anything over just assigning a class to the table, especially if you're not writing the site by hand using HTML. It's just an interesting oddity.

Because? Why not? Actually, the idea for writing about this came from this lovely and appropriately named neocities site I stumbled on at complete random while bopping around the geocities replacment the other day. The sites on there are seriously bad.. in a wow-websites-were-ugly-why-do-i-feel-nostalgic sorta way.

Anyway, Brad Gessler has created a dozen or so new HTML elements with some wacky, make-your-eyes-bleed styles.

Here's a few elements, but go check out his page for the rest. Wear your sunglasses. Maybe take a dramamine. If you think they're awesome, go thank him. If you think it's ridiculous...... why are you still reading this?

blur - <blur>
blurrier - <blurrier>
mirror - <mirror>
upside-down - <upsidedown>
rumble - <rumble>
shudder - <shudder>

Still here? When I was looking for those browser button images, I stumbled across something from 20 years ago that's somehow still up. I love finding this stuff. What is the Internet? How do you get the most out of your browser? All your questions will be answered. You're welcome.

Author

Grant Winney

I write when I've got something to share - a personal project, a solution to a difficult problem, or just an idea. We learn by doing and sharing. We've all got something to contribute.


Comments / Reactions