The importance of clear namespaced HTML attributes

Here's another reminder why expressive, namespaced ids are important. 
This time is about a label's [```for```](https://www.w3schools.com/tags/att_label_for.asp) attribute. 

```
<input id="phone">
<label for="phone"></label
```

This would work just as expected unless, for example, we have a svg sprite at the beginning of the document that includes an svg with a "phone" ```id```.

```
<symbol id="phone" viewBox="0 0 61.4 48">...</symbol>
...
<input id="phone">
<label for="phone"></label
```

In this case, the label's ```for``` will match the first in a top-down order that has the target id. 

And you will never know why clicking the label won't trigger the input.

Nick Ciolpan
05 Apr 2020
« Back to post