Valid characters for the HTML ID attribute

Posted April 4th, 2009 in HTML and CSS (Updated August 2nd, 2010)

The ID attribute in HTML tags has a limited set of allowable characters and a web page will not validate if invalid characters are used. This post summarizes what is allowed. Note that this post is specific to HTML4; for the rules in HTML5 please read "HTML5: Valid characters for the ID attribute"

HTML4 id attribute

The ID and NAME elements must start with a letter i.e. upper case A to Z or lower case a to z; a number is not allowed. After the first letter any number of letters (a to z, A to Z), digits (0 to 9), hyphens (-), underscores (_), colons (:) and periods (.) are allowed.

Note that although you probably wouldn't use them, accented characters appear to be valid after my tests using the W3C markup validation service. So and ID like "aåäæ" is acceptable. However, as with periods and colons (see below), the use of these may well cause issues in some browsers, CSS editors and Javascript frameworks.

In practical terms, it's best to stay away from using colons and periods because they may cause issues with some browsers, CSS editors and Javascript framworks. jQuery, for example, has issues with ids that contain periods and colons.

Another reason to avoid colons and periods is they may cause confusion and styles may not render consistantly across browsers.

For example, an ID could be labelled "a.b:c" and referenced in the style sheet as #a.b:c but as well as being the id for the element, it could mean id "a", class "b", pseudo-selector "c". Best to avoid the confusion and stay away from using . and : altogether.

One final note, every ID on a page must be unique. For example it is not allowed to have two divs on the same page like this: <div id="foo">