HTML Classes and IDs Acceptable Values
Example
For an ID
5
The only restrictions on the value of an id are:
- it must be unique in the document
- it must not contain any space characters
- it must contain at least one character
So the value can be all digits, just one digit, just punctuation characters, include special characters, whatever. Just no whitespace.
So these are valid:
<div id="container"> ... </div>
<div id="999"> ... </div>
<div id="#%LV-||"> ... </div>
<div id="____V"> ... </div>
<div id="⌘⌥"> ... </div>
<div id="♥"> ... </div>
<div id="{}"> ... </div>
<div id="©"> ... </div>
<div id="♤₩¤☆€~¥"> ... </div>
This is invalid:
<div id=" "> ... </div>
This is also invalid, when included in the same document:
<div id="results"> ... </div>
<div id="results"> ... </div>
4.01
An id value must begin with a letter, which can then be followed only by:
- letters (A-Z/a-z)
- digits (0-9)
- hyphens ("-")
- underscores ("_")
- colons (":")
- periods (".")
Referring to the first group of examples in the HTML5 section above, only one is valid:
<div id="container"> ... </div>
These are also valid:
<div id="sampletext"> ... </div>
<div id="sample-text"> ... </div>
<div id="sample_text"> ... </div>
<div id="sample:text"> ... </div>
<div id="sample.text"> ... </div>
Again, if it doesn't start with a letter (uppercase or lowercase), it's not valid.
For a Class
The rules for classes are essentially the same as for an id. The difference is that class values do not need to be unique in the document.
Referring to the examples above, although this is not valid in the same document:
<div id="results"> ... </div>
<div id="results"> ... </div>
This is perfectly okay:
<div class="results"> ... </div>
<div class="results"> ... </div>
Important Note: How ID and Class values are treated outside of HTML
Keep in mind that the rules and examples above apply within the context of HTML.
Using numbers, punctuation or special characters in the value of an id or a class may cause trouble in other contexts, such as CSS, JavaScript and regular expressions.
For example, although the following id is valid in HTML5:
<div id="9lions"> ... </div>
... it is invalid in CSS:
In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. (emphasis added)
In most cases you may be able to escape characters in contexts where they have restrictions or special meaning.
