Is it ok to define your own tags in HTML5?

Problem

In HTML5, is it OK to use CSS to define your own tags? I know it can generally be looked on as bad practice, but why? And why isn't there an XHTML5 that developers can use?

EDIT===========================================================EDIT Someone asked how one would define their own tags, so here is an example. Say I wanted to move text to the right by 10 pixels. I have several options:

  • Use a div with a class and change the CSS for that class
  • I could add a class or id to a <li> ect
  • Or, I could create the tag moveright, and put in my CSS: moveright {margin-left:10px;}
  • In most cases, I would use the div with the class, but if I have to do it many times, I may want to use the last option, to save myself the typing. So, in short laziness. And, someone who loves HTML5, XML, and CSS3!

    Problem courtesy of: tjons

    Solution

    As of today, no it is not okay to define your own HTML5 tags. The HTML5 spec explicitly forbids it. The reason is to avoid any potential clashes with official HTML5 tags that are added in the future and people's custom tags.

    In practice, you can do it; pretty much every browser out there will allow you to do it, and it will work, but you'll be breaking the spec.

    However there is a spec amendment going through the works at the moment which is aimed at allowing it. This spec is not finalised yet, but it's already being used by a few people.

    The new spec basically says that if you want to define your own tags, it's fine; just add x- to the front of the tag name.

    So you would create <x-mytag> rather than simply <mytag>.

    I suggest keeping an eye on the W3C specs to see when this is finalised, and whether they make any last minute changes, but for now, I'd run with that.

    However, bear in mind that the intended use for this is for creating widgets. In other words, if you're building your own combo-box or tree view control, for example. It is not really intended for just arbitrarily creating new tags in the document flow -- we have classes in HTML already; if all you're doing with the element is basic styling, just use a div with a class.

    Hope that helps.

    References:

    1. Current spec: http://www.w3.org/html/wg/drafts/html/master/dom.html#elements

      Authors must not use elements, attributes, or attribute values that are not permitted by this specification or other applicable specifications, as doing so makes it significantly harder for the language to be extended in the future.

    2. Brand new article from HTML5Rocks

      This article does a really good job of explaining how to create custom elements that comply with the new spec. Required reading if you want to do this sort of thing.

      But be aware of the warning at the top of the article that echos my own in this answer:

      Heads up! This article discusses APIs that are not yet fully standardized and still in flux. Be cautious when using experimental APIs in your own projects.

    3. Related question: Are custom elements valid HTML5?

    Solution courtesy of: Spudley

    Discussion

    There is currently no discussion for this recipe.

    This recipe can be found in it's original form on Stack Over Flow.