1

I'm adding unique ids and classes to different elements like this,

<div id="%'@#K!NG,<$wE3T?">Sweet</div>

So I looked up, What are valid values for the id attribute in HTML? There I read the much acclaimed:

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

But then experimenting on my own it seems that it's much more flexible than that. Both of these work:

$(document.getElementById("%'@#K!NG,<$wE3T?")).text();

document.getElementById("%'@#K!NG,<$wE3T?").innerHTML;

Is there some pitfall I don't see if I include characters like !@#$%^&*()<>}| in id names?

Community
  • 1
  • 1
Squirrl
  • 4,909
  • 9
  • 47
  • 85
  • 2
    never heard of semantics ? – KarelG Feb 22 '14 at 19:08
  • @KarelG No not in this sense. Not sure what u mean. – Squirrl Feb 22 '14 at 19:10
  • 1
    Short answer yes: Yes, and it is formalized in the HTML5 spec. http://dev.w3.org/html5/markup/global-attributes.html#common.attrs.id – Felix Kling Feb 22 '14 at 19:59
  • @FelixKling I appreciate the reply and link. It seems that previous versions of HTML would be a problem. I'm looking here http://html5test.com/ for which browser versions wouldn't have it, but I dont quite understand it. – Squirrl Feb 23 '14 at 02:26
  • 1
    You are right, there *could* be a problem with browser versions that don't support HTML5. However, HTML5 also formalized many "features" that browsers *already* had. So even if those browser do not officially support HTML5, they might still support arbitrary characters in ID values. Aside from technical concerns though, it makes sense to keep IDs readable, so sticking with the character set that is defined in HTML4 is not such a bad idea after all :) – Felix Kling Feb 23 '14 at 02:34

1 Answers1

3

It will work in many browsers, but it is not guaranteed to work. For maximum safety, stick to the standard.

This is related to: Why can't variable names start with numbers?.

In HTML/JS, this is probably less of a problem these days, but remember you can do:

>>> window.footer
<div id="footer" class="categories">

Which was pretty much how JS worked in the earlier days. It still works, for reasons of compatibility. It's actually been formalized in HTML5, IMHO it's one of poorer conceived notions of HTML5. I'm fairly sure that every time you use this in a live app, Douglas Crockford kills a small cute mammal. See: DOM: element IDs are global variables.

Community
  • 1
  • 1
Martin Tournoij
  • 26,737
  • 24
  • 105
  • 146
  • THanks! What does that `>>> window.footer` do? I'm not sure what you mean. – Squirrl Feb 22 '14 at 19:13
  • Lol +1 for doug crockford will kill a live kitten. – Squirrl Feb 22 '14 at 19:16
  • 1
    @Squirrl You can access elements which have an `id` attribute set, they're automatically put in the global scope for you. See the link that I added. – Martin Tournoij Feb 22 '14 at 19:23
  • Ok thank you. Not sure if I get the article, but my impression is that in firefox a global object element is created but doesn't initially exist. And then u can `Use W3C standard document.getElementById() instead`, but its not recommended. (For the sake of small mammals) So i may run into problems if I assume it's identified before I try to access it? I'll look more into it. Thanks. It seems to work with the latest version of Firefox. – Squirrl Feb 22 '14 at 19:40
  • 1
    @Squirrl IIRC this was originally an Internet Explorer extensions. I know it also has worked in Opera for a very long time. Not sure about other browser... It's all a bit outside of the scope of your question though, it was just one example where non-alphanumeric characters in HTML `id` attributed could cause problems (although you could, of course, use the alternative `window['strange_id']` syntax). – Martin Tournoij Feb 22 '14 at 19:43
  • What's IIRC and IMHO? – Squirrl Feb 22 '14 at 19:45
  • 1
    [IIRC](http://www.catb.org/jargon/html/I/IIRC.html), [IMHO](http://www.catb.org/jargon/html/I/IMHO.html) – Martin Tournoij Feb 22 '14 at 19:48