Valid values for id attribute in HTML

While creating the id attributes for HTML elements, we need to provide Valid values for id attribute. Let’s see what are they.

ID and NAME value must contain with a letter (A-Za-z) and this may be followed by any number of letters, digits (0-9), underscores (“_”), hyphens (“-“), periods (“.”) and colons (“:”).

In HTML 5, it is said that id must contain at least one character and may not contain any space characters.

In CSS selectors, some characters have special meaning i.e. Periods, colons and ‘#’ and that should be avoided or escape those characters using a backslash in CSS. In jQuery, you can escape with double backslash passed to jQuery.

Try to limit yourself to lower-case characters and always separate all words with either hyphens or underscores. Name in such a way that it would be easy to remember.

Note to remember that class and id attributes are case-sensitive in XHTML, but all other attributes are not.

For example, the declaration <div id=”user.name”></div> is valid.
In this case you need to use #user\.name in CSS to get the selector and in jQuery you need to use $(‘#user\\.name’).

Read Also: Href attribute for links: “javascript:void(0)” or “#”?

HTML5 changes that by allowing almost any value for the id attribute.
This can be useful for some cases. However, value that is using characters that conflict with CSS and/or JavaScript is just asking for trouble.
Do it only if the benefits exceed the risks. Don’t do it just because you can. Use valid values for id attribute only.