Using custom HTML Tags

Solution 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.

Solution 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

Solution 3:

You certainly can; however, it's generally not a good idea to do so. In many ways HTML5 is moving to something like that but genericized; having specific tags, while supported can have very different results among different browsers.

Solution 4:

UPDATE (because all the answers are old):

As of Web components API gets implemented in every major browser, in my opinion, you can't avoid using custom tags in the future. I think Web Components will easily become mainstream. The whole theory is built on it: Custom tags, custom attributes custom JS attached to these elements.

So what i say: it isn't a bad thing to use your own tags nowadays but you still need to consider SEO related building.