Custom tags... why not?
Solution 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 ascustom-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
Solution 2:
There are a number of reasons why you shouldn't do this.
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.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.