We can all agree labels make our inputs more semantic and accessible. Who doesn’t love clicking on a label’s text to immediately focus inside the input?

But there’s a detail regarding input and labels that we haven’t yet made up our collective mind about. A detail that has implications for user accessibility as well as developer readability:

To nest, or not to nest?

Here’s an example of the typical label and input setup I learned in the beginning:

Image for post
Image for post

As you can see, the label and input are sibling elements, linked by the “for” and “id” attributes. This works perfectly well…

Image for post
Image for post

I’ve always been a book person.

I was the kid getting scolded for reading under her desk in elementary school, the teen who spent her entire part-time paycheck at Chapters. I loved books, and I was good at them—good at reading them, good at analyzing them, good at writing my own. I used to lug my favourite three or four novels to school with me every day and arrange them on my desk just so I could look at them.

The people around me saw this passion and encouraged me early and often. I could be an English teacher, a…

Katie King

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store