I spent this afternoon diving headlong into the Custom Elements bit of HTML5 Web Components, which allows you to create your own custom tags.

Yes.  Custom HTML tags.

First of all, you’ve always been able to sort of make up your own custom tags.  In fact the browser makers have always been doing this.  It’s where they try out new and proposed (made up bullcrap) elements.  Before the <DIV> we had Netscape’s <LAYER> tag.  We’ve also seen these funky ones: <bgsound>, <blink> (yes, the dreaded Blink Tag!), <comment>, <embed> and <noembed> (bet you thought that was actually part of the standards didn’t you?), <marquee> (scroll on, little doggies!), <nobr> (no breaks!) and it’s buddy <wbr> (word break), and <plaintext>.  I’m sure there are others.  Point is these have all been used in web pages and none of them were standards, none of them would validate.  Someone just made them up.  Then they petitioned for these tags to become standards but they never did.

HTML5 now has some interesting new “semantic” elements.  In 2005 Google scoured the web, as they do, and noted what the class names and IDs were given to generic container elements (mostly <DIV> tags).  What this highlighted was that web coders WANTED tags with semantic names like “main,” “section,” “article,” “header,” “footer,” etc., but they didn’t exist.  Well, NOW they do.  Ok, fine, but why do you need <article> instead of <div class=”article”> in your code?  Well, if you really love your “DIV soup” (or suffer chronic “DIVitis”) you can keep on coding the old way if you want.  Thing is, as these semantic tags become more ubiquitous, and as accessibility browsers start taking advantage of them, they’re going to eventually become “best practice” instead of a nice feature.  If you still need to code for ancient browsers being used by Pharoh’s scribes it’s also possible to use “shims” to let old browsers know what the hell to do with these new-fangled tags.

Speaking of which, why DON’T browsers have fits when they hit a tag they don’t recognize?  Well the HTML Parser is designed to make tags it doesn’t recognize part of the “HTMLUnknownElement” – which is an HTML object sure, but it doesn’t really have any properties or DO anything.  You can overcome some of that by at least defining the display (block, inline, inline-block, flex) in your CSS.  But HTML5 (again, once this is more widely implemented) will allow you to define new elements (or extensions of existing elements) that gain first-class status as “HTMLElement” instead of being lost in the great HTMLUnknown.