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.
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">
- Using the <label> tag for HTML forms (Saturday, April 25th 2009)
- Add an offsite link icon after external links with CSS (Friday, March 27th 2009)
- Multiple CSS classes for a single element (Saturday, March 21st 2009)
- How to make a font italic with CSS (Saturday, February 21st 2009)
- Favicon tag (Saturday, February 7th 2009)
- How to do the TM symbol in HTML (Saturday, November 8th 2008)