HTML5 erlaubt nahezu alles für das id-Attribut – sei weise

Wie in meinem vorherigen Beitrag "Gültige id-Attribute der HTML-Elemente" ausgeführt, beschränkt HTML 4.01 das erlaubte Format für id-Attribute recht stark:

ID- und NAME-Attribut muss mit einem Buchstaben ([A-Z, a-z]) beginnen, dem eine beliebige Anzahl von Buchstaben, Ziffern ([0-9]), Bindestrichen („-“), Grundstrichen („_“), Doppelpunkten („:“) und Punkten („.“) folgen kann.

Nun, HTML5 lässt jetzt nahezu jeden Wert für id-Attribute zu:

Auszug aus HTML5 3.2.3.1 das id-Attribut:

Der Wert muss eindeutig unter allen IDs im Unterbaum des Elements sein und mindestens aus einem Zeichen bestehen. Der Wert darf keine Leerzeichen enthalten.

Mindestens ein Zeichen, keine Leerzeichen.

Damit ist es nun auch möglich z.B. Akzentbuchstaben zu verwenden. Natürlich erhöht sich damit auch die Chance, dass du dir selber in den Fuss schiesst, da nun auch id-Werte möglich sind, die Probleme mit CSS sowie JavaScript verursachen könnten, wenn du damit nicht vorsichtig bist.

Siehe folgende HTML:

<div id="#id"></div>   
<div id="div>p+p:first-child"></div>

Konflikte mit CSS-Selektoren
Um diese Elemente mit CSS anzusteuern, kannst du nicht einfach die normale Syntax verwenden:

##id {}   
#div>p+p:first-child {}

Da die id-Werte Zeichen enthalten, die bereits in CSS vordefiniert sind, liegt noch ein wenig Arbeit an deinen CSS Selektoren vor dir, damit alles funktioniert. Eine Möglichkeit ist die Verwendung eines Attributselektors anstatt der üblichen #-Abkürzung:

[id="#id"] {}  
[id="div>p+p:first-child"] {}

Du kannst natürlich auch die folgende Art und Weise Konflikte umgehen:

#\#id {}   
#div\>p\+p\:first-child {}

Ärger mit JavaScript
Wenn du eine JavaScript-Bibliothek wie jQuery  zusammen mit deinen flippigen Elementnamen verwenden möchtest — Fehlanzeige:

$("#div>p+p:first-child").css("fontSize", "2em");

Genau wie bei CSS musst du einige Zeichen abgrenzen:

$("#div\\>p\\+p\\:first-child").css("fontSize", "2em");

Fingerspitzengefühl
HTML5 gibt dir mehr Spielraum, um Elemente mit dem id-Attribut zu benennen. Das kann sicher in einigen Fällen recht hilfreich sein. Jedoch, so glaube ich zumindest, ist Ärger schon vorprogrammiert, wenn man Zeichen verwenden darf, die potentiell zu Problemen mit CSS und/oder JavaScript führen. Das Gleiche gilt für flippige Symbole anstatt leicht verständlichem Text. Also ich empfehle diese unbegrenzten Möglichkeiten nur dann, wenn der Nutzen die Risiken bei weitem überwiegt. Nutze es nicht einfach nur, weil du es kannst.