In HTML, what characters are valid as the first character in an id or class attribute?
For example, is <div id="4bla"></div> valid or must they start with only letters?
Asked
Active
Viewed 730 times
-1
neelsg
- 4,250
- 5
- 30
- 55
Oto Shavadze
- 34,391
- 48
- 116
- 201
2 Answers
7
HTML5:
As of HTML5, it is indeed valid to start an ID with a digit.
In HTML5, even this is valid:
<p id="#">Foo.
<p id="##">Bar.
<p id="♥">Baz.
<p id="©">Inga.
<p id="{}">Lorem.
As is your example:
<div id="4bla"></div>
Note: It may be valid in HTML5, however it is not valid in CSS.
That means <div id="4bla"></div> is valid, but #4bla { background-color:red; } isn't.
Start ID's with characters instead for maximum compatibility.
HTML4:
It is invalid if you're still using HTML4:
"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 (".")."
dsgriffin
- 61,907
- 17
- 128
- 134
-
Was it invalid before HTML5? Also, could it cause any issues with CSS and are there any browser specific issues with it? – neelsg May 31 '13 at 08:54
-
@neelsg Yeah, it was invalid before. Here, check this - http://mathiasbynens.be/notes/html5-id-class – dsgriffin May 31 '13 at 08:54
-
@neelsg It was invalid in HTML4: http://www.w3.org/TR/html401/types.html#type-name – Tieson T. May 31 '13 at 09:02
-
@Zenith I guess it is still invalid to start an id with a number, yes, even in HTML5 – Mr. Alien May 31 '13 at 09:09
-
I didn't vote anything up. For a question like this I would like to see a comparison of compatibility between XHTML, HTML5 and HTML4 as well as different browsers and any other implications such as CSS. For instance, would an id starting with `#` work in CSS etc. – neelsg May 31 '13 at 09:10
-
@Mr.Alien No it's not... – dsgriffin May 31 '13 at 09:10
-
@Zenith Does this work for you? http://jsfiddle.net/y2hXT/ – Mr. Alien May 31 '13 at 09:12
-
@Mr.Alien CSS != HTML. It is valid in HTML5 but not in CSS. – dsgriffin May 31 '13 at 09:15
-
@Zenith Can you provide me any documentation link? Cuz I think you've picked that thing from here http://mathiasbynens.be/notes/html5-id-class – Mr. Alien May 31 '13 at 09:16
-
@Mr.Alien See the links posted by TJ here - http://stackoverflow.com/a/5672936/1586880 – dsgriffin May 31 '13 at 09:18
-
@neelsg It doesn't, I've updated my answer. – dsgriffin May 31 '13 at 10:11
2
No, its not XHTML valid. You can use the XHTML-Validator to check your HTML code.
But even if its not XHTML-Valid it should work in almost every browser.
fnkr
- 7,080
- 6
- 41
- 54