What are the concrete risks of using custom HTML elements and attributes in HTML5?

Question

My question is similar to what this poster is asking: What are the concrete risks of using custom HTML attributes?

but I want to know what can happen if I use custom elements and custom attributes with the current html specs (html 5).

Example

<x a="5"> abc </x>

Visually I see no issues in any browser. js works:

 x = document.getElementsByTagName('x');
 alert('x has attribute a=' + x[0].getAttribute('a'));

css works too:

x{
  color: red;
}

x[a]{
  text-decoration:underline;
}

Answer 1

The only issue I can think of is that other applications, including search engines, won't recognize your custom elements and properties, so they won't know what to look for or how to use them which is a decided disadvantage for SEO. Other applications trying to access your content, including RESTful apps, will not know either without you telling the app developer.

This was always listed as one of the disadvantages of XML/XHTML but here we are again, back full circle to where we should have been in the first place, the use of XML on the web ... but I digress.

Answer 2

Possible Risks include

1. Backward compatibility. In particular, IE8 and below won't understand your tag, and you'll have to remember to write document.createElement('x') for all your new elements.

2. Semantics - having your html machine-readable may not be your goal, but there may come a time when it needs to be parsed in a moderately useful fashion.

3. Portability & maintenance - there are plenty of current html tags that almost certainly do what you want them to do. At some point, someone else may have to look after your code. Is there anything to be gained from having them spend time learning what all your new tags are for?

4. SEO - don't take the risk of a penalty just because it's something you can do..

For completeness, there are justified reasons to do it though. If you can demonstrate your new tag improves the semantics of your page (your example of 'x' obviously doesn't) and you can think of some use-case where your page will be machine-parsed by your own process, then go for it.

Answer 3

The main reason custom elements were frowned upon in the past is because browsers don't know what to do with them and there was no standardised way of telling them what they are.

What are the risks of using custom HTML elements in HTML5 without following standardisation?

• Browsers will handle them differently:
  • Some browsers may ignore the elements and pretend they're not there; <x>, I don't know what <x> is, lets get rid of that.
  • Some browsers may attempt to convert the element into something else; define a <tab> element and a browser may think you've mis-spelled <table>, for instance.
• You'd have to handle what the element is supposed to do across a large range of devices; just because it works on your PC doesn't mean it works on your phone, or your TV, or your e-reader... or your WiFi-powered fridge...

The good news is that there is some new documentation being written up to allow developers to define their own custom elements in a standardised way. Custom Elements, as it's titled, gives both developers and browser vendors the know-how to allow developers to implement and script custom elements in a way which will work across all supporting browsers... or that's the idea, anyway.