One of the more subtle yet awesome changes that HTML5 brings, applies to the id attribute. I already tweeted about this a few months ago, but I think this is interesting enough to write about in more than 140 characters.
How id differs in between HTML 4.01 and HTML5
The HTML 4.01 spec states that ID 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 (.). For the class attribute, there is no such limitation. Classnames can contain any character, and they don’t have to start with a letter to be valid.
HTML5 gets rid of the additional restrictions on the id attribute. The only requirements left — apart from being unique in the document — are that the value must contain at least one character (can’t be empty), and that it can’t contain any space characters.
This means the rules that apply to values of class and id attributes are now very similar in HTML5.
Err, what?
Although that probably sounds boring, this actually is pretty cool. In HTML 4.01, the following code is perfectly valid:
<p class="#">Foo.
<p class="##">Bar.
<p class="♥">Baz.
<p class="©">Inga.
<p class="{}">Lorem.
<p class="“‘’”">Ipsum.
<p class="⌘⌥">Dolor.
<p class="{}">Sit.
<p class="[attr=value]">Amet.Heck, you could even use a brainfuck program as a classname:
<p class="++++++++++[>+++++++>++++++++++>+++>+<<<<-]>++.>+.+++++++..+++.>++.<<+++++++++++++++.>.+++.------.--------.>+.>.">Hello world!I’ve put up a demo page with some other examples, but I’m sure you can think of more. After all, the possibilities are endless :)
So what’s new?
In HTML5, you can take all of these groovy classnames and use them as values for id attributes. Yes, HTML5 is that awesome.
<p id="#">Foo.
<p id="##">Bar.
<p id="♥">Baz.
<p id="©">Inga.
<p id="{}">Lorem.
<p id="“‘’”">Ipsum.
<p id="⌘⌥">Dolor.
<p id="{}">Sit.
<p id="[attr=value]">Amet.
<p id="++++++++++[>+++++++>++++++++++>+++>+<<<<-]>++.>+.+++++++..+++.>++.<<+++++++++++++++.>.+++.------.--------.>+.>.">Hello world!…you get the idea. I remade the same demo page as before to use ids instead of classes.
How to escape any character in CSS
Writing CSS for this markup is tricky. For example, you can’t just use ## { color: #f00; } to target the element with id="#". Instead, you’ll have to escape the weird characters (in this case, the second #). Doing so will cancel the meaning of special CSS characters and allows you to refer to characters you cannot easily type out, like crazy Unicode symbols. It gets even trickier if you need to use these escaped CSS selectors in JavaScript as well.
That’s why I’ve written a separate blog post explaining how to escape any character in CSS, and how to use escaped CSS selectors in JavaScript.
Comments
Glenn Glerum wrote on :
seutje wrote on :
Mathias wrote on :
Mathias wrote on :
Kroc Camen wrote on :
seutje wrote on :
IE6 will show all green, all other browsers will show all red. Albert wrote on :
Weston Ruter wrote on :
David Bishop wrote on :
Mathias wrote on :
Vic Shoup wrote on :
Weston Ruter wrote on :
Mathias wrote on :
"` * `id="<><<<>><>"` * `id="++++++++++[>+++++++>++++++++++>+++>+<<<<-]>++.>+.+++++++..+++.>++.<<+++++++++++++++.>.+++.------.--------.>+.>."` I had to remove these or the page wouldn’t be rendered. So, in XHTML5, `ID`s cannot contain an unescaped less-than sign (`<`). Other than that, everything seems to work fine. Use of the greater-than sign (`>`) presents no problem whatsoever, and I can see why. Note that it would be possible to use these three `ID`s in XHTML by wrapping the contents of the `
This paragraph gets a lime background. ``` Any value for the HTML `id` attribute can be represented in CSS (or in selectors in JavaScript/jQuery). Check out the the tool I link to in this post.
tomByrer wrote on :
Mathias wrote on :
José A M Pacheco wrote on :