Using custom HTML Tags

Question

In my HTML I was curious if it was semantically correct to use unique identifiers such as <toys> rather than an <h1>. For example:

I wanted to have:

<toys class="grid_4 push_2">&nbsp;</toys> 

With the CSS:

toys {   background: url("toys.png") no-repeat scroll 0 0 transparent;   width: 181px;   height: 93px;   margin-top: -8px; } 

I currently have:

<h1 class="grid_4 push_2">&nbsp;</h1> 

With the CSS:

h1.push_2 {   background: url("toys.png") no-repeat scroll 0 0 transparent;   width: 181px;   height: 93px;   margin-top: -8px; } 

Is the use of unique identifiers like <toys> semantically correct?

Answer 1

Most of these responses are good general advice, but not proper answers to the question, which I think is perfectly legitimate.

HTML5 is already a moving target; browsers implement specs and innovate at different paces. There is no single thing called "valid HTML", at least not that is worth using. If you are building a public page for every person and bot/crawler on the planet, then you already either have to A) detect the client and customize accordingly, for complex/advanced pages or B) make it really, really simple and plain. If, on the other hand, you're putting it on a LAN or hiding it behind a login wall or developing on the cutting edge and plan for frequent updates anyway, then you should feel free to innovate a bit, with discretion. Browser devs and spec writers cater to their needs, you can do the same.

So, if you want a custom tag, choose carefully (here I will point out that the odds that would ever become part of a formal spec of browser implementation are totally negligible), then go for it. To make your CSS work in IE, though, you will have to do as html5shim does and call document.createElement('toys') in your javascript.

I should also add that custom elements are getting their own standards and support, but the consensus currently is that they all should have a '-' in the name. So I would recommend something like 'x-toys' or 'my-toys' instead of just 'toys'. Personally, i'm not thrilled with the convention, but I understand the reasons.

Answer 2

It is best to avoid using custom tags, as you never know when those tags may become standardized, and have special usage in the future.

The best thing to do for your example, if you want to avoid using the header tags, is the following:

<div class="toys grid_4 push_2">&nbsp</div>  .toys {     background: url("toys.png") no-repeat scroll 0 0 transparent;     width: 181px;     height: 93px;     margin-top: -8px; } 

In addition:

If you do not use standard html tags when designing pages, they will not appear in any organized manner when styles are disabled. This is not a problem, going forward, but if for any reason you needed to view a list of "toys" without styles, you had be out of luck unless you use <ul> or <ol> with <li> tags.

UPDATE:

As Flimzy pointed out in the comments, custom HTML elements now have their own W3C specification. However, they are not yet fully supported.

• Specification: https://www.w3.org/TR/custom-elements/
• Support: http://caniuse.com/#feat=custom-elements