Using custom HTML Tags

Question

In my html I was curious if it was semantically correct to use unique identifiers such as <toys> </toys> to hold an image rather than an <h2>. For example:

Is it preferred 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;
    }

instead of: I currently have: <h1 class="grid_4 push_2">&nbsp</h1>

with the css:

    h1 {
    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.