Can You Use Your Own, Completely New, Made-Up HTML Tags Instead of Normal H1, H2, etc.? … Why, Sure!

I happened across a Stackoverflow (great site) post a while back where some kid was asking “Can I make up my own HTML tags?” Presumably, the kid wasn’t referring to IDs or class names, which anyone is free to call anything at all. The OP (original poster) was talking about actual tags like h1, h2, etc. Now, if you’ve ever spent time on any kind of internet coding forum, you probably know the kind of abuse this kid had to endure simply for asking an innocent question. In computer coding forums, the usual conversation goes like this:

Questioner: Is it possible for me to do X?

Answer #1: Why in the world would you want to do that?!

Answer #2: That’s not a good idea. You should never do X.

Answer #3: Here is a JSfiddle that does not work for you to look at.

Answer #4: Cool idea, bro, but it’s definitely impossible.

Answer #5: Yes, it’s possible, but I don’t know how to do it.

Answer #6: Actually, it’s easy. Here is some code that works.

Answer #7: Ummm, I tried Answer #6 and it does NOT work on IE8, so use that code at your peril.

As much as everyone and anyone says “no,” or suggests that this is a bad idea, the possibility does exist (at least with all of today’s major browsers) for making up your own markup language. The following code …

<!-- standard HTML -->
<h1>Normal H1 Tag</h1>
<p>This is a standard P paragraph.</p>

<!-- any tags you invent -->
foo { color: green; display: block; font-size: 35px; font-weight: bold; }
bar { color:red; }
spandex.isfunny { background:black; color:white; }

<foo>This is a FOO tag.</foo>
<bar>This is a BAR paragraph.</bar>
<bar><spandex class="isfunny">This is a SPANDEX (instead of a "span") within another BAR paragraph.</bar>

…indeed parses and displays well on Chrome, IE, Safari, and Firefox — regardless of any what’s, why’s, how’s, and best-practices. The fact is, that code renders fine, and basically the same, in browsers as of this writing. Take a look:

While the coding community may not be able to understand any motive for doing so, there may well be some novel use for something like this. Here would be some ideas:

  • As an SEO experiment… Might something tagged with a custom keyword-loaded phrase (not just a class name, but an actual tag like <widget>) generate any Google juice? I doubt any serious ecom sites care to try this, but one never knows.
  • Assuming such a thing could be detrimental to SEO, there may well be some use for this to that end — i.e., within some context where, for some hyper-paranoid reason, one wants to obfuscate content and/or confuse any visiting bots. Again, I can’t think of a specific example, but I imagine something like that could be kind of interesting to build-out. In today’s “look at me, visit my site” atmosphere, there’s something kind of appealing about a site that actively doesn’t want visitors.
  • While most people appreciate web standards such as H1, H2, H3 tags, etc., having some pre-defined attributes and usages, one could imagine a designer wanting to start from an even more absolute baseline than even completely unstyled HTML has attached.

A little out of the box, but there it is…

Jim Dee heads up Array Web Development, LLC in Portland, OR. He’s the editor of “Web Designer | Web Developer” magazine and a contributor to many online publications. You can reach him at: Jim [at] Photo atop piece is adapted from “San Mateo, May-2017” by Mitch Altman (Flickr, Creative Commons).