Brainstorm: Custom html tags

With HTML5 came a bunch of new tags. Older, non-updating browsers didn’t recognize these tags and would render them incorrectly so polyfills were made (read html5shiv).
The general idea there was to add the tags to the html parser thing so they would be accepted as valid tags and stylable by CSS.

So I was thinking… If adding custom tag names is so easily done and a widely accepted cross-browser method, why stop at html5 tags?
How bad is the idea of a completely made-up tag structure specific to a web app?

An example

The below example shows a calendar component. There is no fitting semantic way to describe the calendar markup with regular html, so it would normally end up with a bunch of nested divs and spans with descriptive class names. In the below example however; the tags clearly describe their identity.

<calendar>
	<nav class="prev">Previous month</nav>
	<nav class="next">Next month</nav>
	<month>February</month>
	<year>2013</year>
	<week class="week-6">
		<day class="mon day-4">4</day>
		<day class="tue day-5 today">5</day>
		<day class="wed day-6">6</day>
		<day class="thu day-7">7</day>
		<day class="fri day-8">8</day>
		<day class="sat day-9">9</day>
		<day class="sun day-10">10</day>
	</week>
</calendar>

Check out this Pen!

Issue #1

For IE-lt-9 you’d need to extend the html5 shiv script to add your custom tags. Or just don’t.

Issue #2

You’d need to supply your own default styling for each new element. Unless they are inline and serve no styling purpose.

Issue #3

Will not validate. Who cares? It’s completely functional.

Issue #4

The self created tags can not have any functional properties like <a href=""> or <head>, so would only exist for content organization.

Update: Issue #5

If in the future one of your homemade tags does land in the HTML specs, it could add unexpected styling to your markup.

Update 18 march 2014:
Custom elements seem to have become a thing now:
http://coding.smashingmagazine.com/2014/03/04/introduction-to-custom-elements/

Update 5 july 2014;
This article talks about about web components before I knew web components existed (assuming they did already exist)! Even though these ideas are implementable while waiting for better browser support for actual web components, and are more about custom tags than about shadow DOM, WC’s take it to a new level.

Posted by Berend on February 5, 2013