Can an ID attribute start with colon?

Question

Was viewing the source of Gmail for purely academic purposes and I came across this.

<input id=":3f4" 
    name="attach" 
    type="checkbox" 
    value="13777be311c96bab_13777be311c96bab_0.1_-1" 
    checked="">

Wonder of wonders, most elements have ids that starts with a :
I always thought the definition for ID attribute was this.

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 (".").

Or am I missing anything new? I mean is that OK with HTML5?

Answer 1

Permissibility

It is allowed in the latest working draft: http://www.w3.org/TR/html-markup/datatypes.html#common.data.id

Any string, with the following restrictions:
- must be at least one character long
- must not contain any space characters

The spec also notes:

Previous versions of HTML placed greater restrictions on the content of ID values (for example, they did not permit ID values to begin with a number).

The definition you quoted appears in the HTML 4 spec.

There is a widely-visited SO thread which visits some of considerations regarding IDs (mainly from an HTML 4 perspective).

Rationale

After thinking about it more, I realized that there are two good questions here:

Why does the spec allow this?

IDs which can contain any character have the potential to break all sorts of things, such as CSS selectors (if proper escaping is not used), Sizzle (which jQuery uses) pattern matches, server IDs (such as ASP.Net web forms use) and IDs which are generated from model properties (such as one might do with a MVC pattern).

All those things aside, I believe a key goal of HTML 5 was to not create restrictions that weren't absolutely necessary (which was a shortcoming of XHTML). Just because a purpose hasn't been identified for something yet doesn't mean that it won't be in the future.

Despite the many things which won't work, certain things work just fine, for example document.getElementById(":foo")

http://jsfiddle.net/Xjast/

As with most things, it is up to the developer to be knowledgeable of the tools that he or she is using.

Why does Google do this?

Obviously this can't be answered conclusively unless you are part of the Gmail team. However, Google heavily minimizes and obfuscates their code; they also manage a huge amount of script, which suggests well-defined conventions.

Here's another thought. What if Google is leveraging the fact that CSS selectors require escaping of certain characters? This would go a long way towards reducing accidental restyling of content contained in an email message.