What Are Valid Html5 Custom Tags?

Recently I've been reading about how you can make custom tags valid in HTML5 by putting a dash in the name, so I've been wondering what the actual rules / guidelines are for custom

Solution 1:

TL;DR: There are no valid custom HTML5 tags.

---

I think you may be referring to this Custom Element Working Draft proposed by the Web Applications Working Group, which describes this:

The custom element type identifies a custom element interface and is a sequence of characters that must match the NCName production, must contain a U+002D HYPHEN-MINUS character, and must not contain any uppercase ASCII letters. The custom element type must not be one of the following values:

• annotation-xml
• color-profile
• font-face
• font-face-src
• font-face-uri
• font-face-format
• font-face-name
• missing-glyph

Additionally, according to HTML5 specification, HTML tag names can only start with ASCII letters. If we assume that the Custom Element proposal does not propose any changes to the HTML Syntax specification, then elements starting with hyphens-minus character is not a valid HTML tag name. If we combine what the Custom Element Working Draft proposal and the HTML5 Syntax specification says, then we can conclude that <-custom> is not a well-formed HTML and so cannot be a valid Custom Element because the tag name does not start with ASCII letter. On the other hand, custom- is both a well-formed HTML and a valid Custom Element.

Note that Custom Element is a Working Draft, not a W3C Recommendation. This means that Custom Elements is not valid in HTML5. Don't get your hopes up either, a lot of Working Drafts that are proposed in W3C never got anywhere (and for good reasons too, not all of the proposals are good).

<rant>Personally I hope that this proposal got shot down. I spent some time reading this proposal, it looks like this proposal tried to reinvent XML Namespace and SGML poorly, and probably forgot about what HTML and the semantic web is supposed to be. In any case, HTML5 syntax already allows authors to use elements that aren't specified in HTML5 specification, I don't see any need to standardize how to create custom elements any further than that. I hope that there would be people in HTML5 working group sane enough to realize how bad this proposal is and vote this proposal off. Keep HTML5 closed from author-defined custom modifications.</rant>

If you want to define your own custom vocabularies, I suggest you should write an XML application with XHTML5, which actually specifies how you can define your own custom elements with XML namespaces. Unlike HTML, XML is designed to be extensible.

---

As for your question about custom data attribute, this is what the HTML5 specification says:

A custom data attribute is an attribute in no namespace whose name starts with the string "data-", has at least one character after the hyphen, is XML-compatible, and contains no uppercase ASCII letters.

So with your examples, these are valid data-* attributes:

• data-my-attribute

while these are not:

• my-attribute

As far as I can tell, the Custom Elements Working Draft does not specify any additional syntactical requirement for custom attributes on Custom Elements, nor does it explicitly permit using arbitrary non-data-* attributes and how custom attributes interacts with existing HTML attributes, although we can reasonably infer that allowing custom attributes is probably the intent of the proposal.

---

As for your question about CSS, yes you understood correctly, those are valid CSS selectors to target those Custom Elements. CSS can be used to style any elements, not just elements defined by HTML, but also other markup languages like SVG, MathML, as well as arbitrary XML vocabularies when using XHTML. The CSS Selectors specification does not actually depend on HTML vocabulary in any substantial way (although HTML is used heavily in the examples, as it's what most people are most familiar with). It is for this reason that CSS Selector syntax can be used to refer to any elements in the document, including custom elements that aren't specified in the HTML specification. Styling custom tag already works in all major browsers today. You can use any arbitrary tag names, and select them with the selector that you expect, and CSS will style them as you would expect them to be. There is no requirement for having hyphen-minus in the tag name for this to work.

Solution 2:

To pass validation, all attributes you add that aren't available for the element by default should be prefixed with data - it has nothing to do with it containing a dash or not.

Targeting these in CSS is done by using something like element[data-attribute].

So this is valid: <div data-title="Custom Data Title"></div>, this would not be : <div custom-title="Custom Title"></div>. Targeting could be done by using div[data-title="Custom Data Title"]{}

Concerning tags, you are limited to the tags provided by the browser if you want your site to validate. You cannot use custom elements willy-nilly, as it increases processing of your page.

You can use javascript to require a page to recognise certain tags, but it still won't validate. This will work, but is not advised:

<scripttype="text/javascript">document.createElement("custom");</script><customdata-name="Something">Here</custom>

Theres more info here: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

Solution 3:

HTML5 does not have a specific doctype definition or an XML schema definition.

It is possible to create custom HTML tags (custom elements) as they can be used to create web components

Custom attributes are also valid as they can serve to supply a web component with required information

e.g.

<custom-elementa="x"b="y"/>