Using custom HTML Tags

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?

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.

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

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.

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.

Surely if you define a tag and also define within your stylesheet what it should do, that should tie it up? Even if your new tag later becomes standardised, your stylesheet will override the standard - after all that is what stylesheets are for.

For example, I often need to control line breaks on my pages. Rather than use a clumsy

<span style="white-space:nowrap">bla bla bla</span>

every time, I enclose my non-broken text within my own tags and define in my stylesheet:

nbr {
  white-space:nowrap;
}

so

<p> This is some text. <nbr>This is some more text.</nbr></p>

will appear on one line if there's room, otherwise the second sentence will appear on the next line. Or, to be precise, in all browsers except old versions of IE. To be cast iron, I added the following to each page [head] section (in Wordpress, only need to add to the theme's header.php):-

<!--[if lt IE 9]> 
<script> document.createElement('nbr'); </script>
<![endif]-->

Or am I missing something?

Yes, that would be semantically correct.

However, it's invalid syntax as HTML has a defined set of tags.

You can get around that in some browsers.

That said, what's the benefit of doing that? It really would only benefit the person that has to maintain the source code.

FYI, what you are proposing is pretty much what XML is.

I agree with @superUntiled, you should make good use of the CSS selectors (classes and IDs). So if you have an object of type "toy", you should create a class for that object. Then you could select all your cars using CSS just using the selector .toy.

Something like this:

<style>
.toy {
    color: red;
}
</style>

<p class="toy">My little car</p>

I also agree with the original poster that custom elements could be a better way than CSS classes and IDs. For example I have a friend who manages his inventory and content for his website in Google Sheets. The google sheets array output is just plain text. (The frontend HTML uses JS to retrieve content from GSheets). Therefore, I set custom tags, such as <sale>, to change font color and style so my friend, who doesn't know coding, can simply insert those tags into the google sheet to customize the font. It's awesome.

If your doctype is set to XHTML, you should be fine. But it's generally not valid for HTML doctypes.

You don't want to make up your own tags.

The HTML tags are defined in the HTML specification.

In stead of:

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

You should do something like:

<h1 class="toys">&nbsp</h1>

However you can make up you own tags if XML.

But please note that not all browser support your tag and you won't be able to style them using CSS.

Same thing is happening with new HTML5 tags