Question

I’ve been unable to find a definitive answer to whether custom tags are valid in HTML5, like this:

<greeting>Hello!</greeting>

I’ve found nothing in the spec one way or the other:

http://dev.w3.org/html5/spec/single-page.html

And custom tags don’t seem to validate with the W3C validator.

Answer 1

The Custom Elements specification is widely implemented today as part of Web Components. It provides a means to register custom elements in a formal manner.

Custom elements are new types of DOM elements that can be defined by
authors. Unlike decorators, which are stateless and ephemeral, custom
elements can encapsulate state and provide script interfaces.

Custom elements is a part of a larger W3 specification called Web Components, along with Templates, HTML Imports, and Shadow DOM.

Web Components enable Web application authors to define widgets with a
level of visual richness and interactivity not possible with CSS
alone, and ease of composition and reuse not possible with script
libraries today.

However, from this excellent walk through article on Google Developers about Custom Elements v1:

The name of a custom element must contain a dash (-). So <x-tags>, <my-element>, and <my-awesome-app> are all valid names, while <tabs> and <foo_bar> are not. This requirement is so the HTML parser can distinguish custom elements from regular elements. It also ensures forward compatibility when new tags are added to HTML.

Some Resources

• Example Web Components are available at https://WebComponents.org
• WebComponents.js serves as a polyfill for Web Components until they are supported everywhere. See also the WebComponents.js github page & web browser support table.