The HTML5 specification allows for virtually any value of the id attribute - use it wisely

As I mentioned some time ago in the article “ Creating correct id ”, HTML 4.01 is quite limited in terms of the valid values ​​of the id attribute:

The ID and NAME attributes must begin with a letter ([A-Za-z]), followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":") and dots (".").

HTML5 allows the use of almost any id attribute value:
HTML5 3.2.3.1 specification about the id attribute :

The value must be unique relative to all other ID values ​​within the tree of elements containing the given one and must contain at least one character. The value must not contain spaces.

At least one character, no spaces.

This allows you to use special characters as values ​​for the id attribute. And it also gives us a lot of opportunities to put ourselves in an idiotic position, since we can use values ​​that cause problems with both CSS and JavaScript, if you are not careful.

Consider the following HTML code:

<div id="#id"></div> <div id="div>p+p:first-child"></div> 

Conflicts with CSS selectors

To apply to the above elements using CSS, the normal syntax cannot be used:

 ##id {} #div>p+p:first-child {} 

')
Since id contains a character for which there is a predefined value in CSS, you will need to conjure a little over CSS selectors to make them work as they should. One way is to use the selector by attribute value, instead of #:

 [id="#id"] {} [id="div>p+p:first-child"] {} 

Another way is to escape the characters causing the conflict:

 #\#id {} #div\>p\+p\:first-child {} 

JavaScript issues

If you are using a javascript library, like jQuery, to work on our elements, this will cause difficulties:

 $("#div>p+p:first-child").css("fontSize", "2em"); 

As with CSS, you have to escape special characters:

 $("#div\\>p\\+p\\:first-child").css("fontSize", "2em"); 

Meaningful naming of elements

HTML5 gives us more freedom in choosing the values ​​of the id attribute of elements. This can sometimes be useful. But, in my opinion, to use symbols that cause conflict with CSS and JavaScript means simply asking for trouble. The same with the use of cool characters, instead of the normal readable text. Use, if advantages will prevail over risks. But do not use the new naming features just because you can.