HTMLX — Custom Elements Before It Was Cool

In 2011, I was learning web development as I attend my high school. At that time, we were learning basics of HTML. So we learned stuffs about <table>, <div>, etc. The things that bother me was, why do I have to write <div>, why not <vid>, or <dav>, or anything else.

So I learned about CSS too, and from my opinion, the different between div and some other elements was, div is displayed as a display: block in CSS.

So I have this idea, what if I created a custom tags, it is not standard, but it would definitely save space and money, because internet speed and bandwidth is very limited.

Then, I created HTMLX. It basically just a guidelines, not an actual tools or libraries or frameworks. So, HTMLX means replace all div with x. Then, the 3 bytes that you spent on writing div, would be just a byte when using x. Then on the CSS, set that x should be displayed as display: block, just like a div.

Sample of HTMLX — As you can see, <x> was just <div>, only shorter.

I know that this things will break some SEO and HTML semantics. But at the time where space and bandwidth is very valuable, I can sacrifice those and be happy with the HTMLX implementation.

HTMLX, you can say a guidelines on implementing custom element defined a x, and this is my first experience on dealing with custom element before it made popular with Web Components, Angular, React, Vue, etc (well, it is just a dumb component responsible for displaying x as display: block, not as sophisticated as those tools mentioned).