Custom tags… why not?

Question

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>

Answer 1

Custom tags are not evil

just consider this:

• They are not recognized in IE 6-8 by default -> you have to use JavaScript to introduce each custom tag you use on the page e.g: document.createElement('custom-tag') This means your website will only render correctly with JavaScript turned on
• In most browsers your custom tags will be treated as inline elements like <span>, this means you have to write CSS to declare them as custom-tag { display: block }
• There is no resource I found that could proof that custom tags have any negative impact on search engines. In fact Google released Angular.js which promotes custom tags (<pane> and <tab>) in its examples on the front page.
• Most HTML Editors will mark your custom tags as invalid HTML, because they are not in the official spec.

To summarize:

• Use custom tags when there are important elements that have more meaning than <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).
• If all you build is a simple website with normal content, stick to standard HTML. You will want your website to work also without JavaScript turned on.
• If you build a web application where custom tags could really help to make the source cleaner and express special semantics, use them. All negative implications mentioned above (JavaScript has to be turned on / CSS declaration) won't matter for these cases. The same rules apply to custom attributes.

For more details on this topic: IE compatibility for Angular.js

Answer 2

There are a number of reasons why you shouldn't do this.

1. First: By creating your own tags like that, you lose the functionality of tags like ul and li. Your custom tags will just be generic divs, and that won't give you the results you are looking for.Yes, you can style the tags to duplicate those functions, but why spend all that time doing something that browser already does.

2. Second: People with disabilities will not be able to utilize your site, because it won't conform to any standard HTML. Those who are blind will use assistive technologies that read the html and present the contents verbally.

Another reason is that browsers and javascript don't always work really well with these custom tags. You will likely run into more problems than you imagine. It will be harder to make your apps cross-platform if you do this.

Answer 3

Elements defined in HTML have known semantics. These can be understood by browsers (especially useful if they don't have CSS support), screen readers, search engines, and any other user agent and then expressed to the user.

Your own elements are meaningless.

Answer 4

I think you'd want to use XSLT to transform your XML to valid HTML. If you introduce your own custom tag, you are no longer writing HTML, but probably XML or SGML.

Answer 5

Well, for one thing you'd have to define CSS for all of those custom elements to behave like you want them to (eg. make the <ccommentbox> appear like a list), which causes unnecessary CSS. It also makes it harder for search bots to understand your site.