#custom #experiment #html5 #idea #made-up #tags
Provides an instant overview of your shop's current customers and the contents of their carts.
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?
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!
For IE-lt-9 you’d need to extend the html5 shiv script to add your custom tags. Or just don’t.
You’d need to supply your own default styling for each new element. Unless they are inline and serve no styling purpose.
Will not validate. Who cares? It’s completely functional.
The self created tags can not have any functional properties like
<a href=""> or
<head>, so would only exist for content organization.
If in the future one of your homemade tags does land in the HTML specs, it could add unexpected styling to your markup.
Posted by Berend on
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>