Creating valid names with the id attribute

When using the id attribute to create a unique name for an element in an HTML document, there is a simple rule that defines which characters you may use for that name.

From Basic HTML data types:

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

It’s a simple rule, but judging by how often I see id values that are invalid, for instance by beginning with a digit, this does not seem to be common knowledge.

My personal preference is to use only lower case letters ([a-z]), digits ([0-9]), and hyphens (“-”). It looks cleaner and avoids the great confusion that using colons (“:”) and periods (“.”) could lead to in combination with CSS selectors that also use those characters.

This post is a Quick Tip. Background info is available in Quick Tips for web developers and web designers.

Posted on February 2, 2009 in Quick Tips, (X)HTML