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">