I found a site with an guide to add custom tags to html, the same way people make ie work with the new HTML5 tags. I must admit I think it would be great to add my own tags, would make it easier to "scan" the the code, and find what you are looking for. But every site I found about it, people say it's not good.... but why isn't it good?
Example html with class:
<ul class="commentlist">
<li class="comment odd">
<div class="1">
<div class="avatar">
<img src="http://placehold.it/60x60" width="60" height="60" />
</div>
<div class="metadata">
<div class="name">Name</div>
<p>response1</p>
</div>
</div>
<ul class="children">
<li class="comment even">
<div class="2">
<div class="avatar">
<img src="http://placehold.it/60x60" width="60" height="60" />
</div>
<div class="metadata">
<div class="name">Name</div>
<p>response1a</p>
</div>
</div>
</li>
<li class="comment odd">
<div class="3">
<div class="avatar">
<img src="http://placehold.it/60x60" width="60" height="60" />
</div>
<div class="metadata">
<div class="name">Name</div>
<p>response1b</p>
</div>
</div>
</li>
</ul>
</li>
And here what I could do with custom tags, I think that would be much easier to find my way around, so why not:
<clist>
<ccommentbox class="odd">
<ccomment class="1">
<cavatar>
<img src="http://placehold.it/60x60" width="60" height="60" />
</cavatar>
<cdata>
<cname>Name</cname>
<ctext>response1</ctext>
</cdata>
</ccomment>
<cchildren>
<ccommentbox class="even">
<ccomment class="2">
<cavatar>
<img src="http://placehold.it/60x60" width="60" height="60" />
</cavatar>
<cdata>
<cname>Name</cname>
<ctext>response1a</ctext>
</cdata>
</ccomment>
</ccommentbox>
<ccommentbox class="odd">
<ccomment class="3">
<cavatar>
<img src="http://placehold.it/60x60" width="60" height="60" />
</cavatar>
<cdata>
<cname>Name</cname>
<ctext>response1b</ctext>
</cdata>
</ccomment>
</ccommentbox>
</cchildren>
</ccommentbox>
just consider this:
document.createElement('custom-tag')
This means your website will only render correctly with JavaScript turned on<span>
, this means you have to write CSS to declare them as custom-tag { display: block }
<pane>
and <tab>
) in its examples on the front page.<div>
and there is no existing HTML 4/5
equivalent. This is especially true for web applications which
parse the DOM for special tags/attributes/classes to create
components (like Angular.js).For more details on this topic: IE compatibility for Angular.js