HTML id attributen
id's en geldige waarden
- HTML4: ID- en NAME-tokens moeten beginnen met een letter ([A-Za-z]) en mogen worden gevolgd door een willekeurig aantal letters, cijfers ([0-9]), koppeltekens ("-"), underscores ("_"), dubbele punten (":") en punten (".").
- HTML5: heeft geen restricties voor wat betreft id's
Dus laten we dat eens uitproberen. Kijk in de accessibility tree in je browser wat de namen zijn van onderstaande knoppen. Niet elke knop is togankelijk.
Voorbeelden
id=49963
...
<button id="49963">
<img src="knop.png" alt="">
</button>
<label for="49963">knop met id=49963 en for<label>
id=r49963
...
<button id="r49963">
<img src="knop.png" alt="">
</button>
<label for="r49963">knop met id=r49963 en for<label>
id=:49963:
...
<button id=":49963:">
<img src="knop.png" alt="">
</button>
<label for=":49963:">knop met id=:49963: en for<label>
id=R, for=r
...
<button id="R">
<img src="knop.png" alt="">
</button>
<label for="r">knop met id=R en for=r<label>
id=:
...
<button id=":">
<img src="knop.png" alt="">
</button>
<label for=":">knop met id=: en for<label>
CSS
label[for="49963"],.color1{background:aqua;}
label[for="r49963"],.color2{background:lime;}
label[for="\:49963\:"],.color3b{background:rebeccapurple;}
label[for=":49963:"],.color3{background:yellow;}
label[for="r"],.color4{background:bisque;}
label[for="R"],.color4{background:red;}
label[for=":"],.color5{background:red;}
