Nesting input elements within label elements

Web Development Bootcamp
1

Hello all. I was wondering if I could get more information and opinions on whether or not to nest input elements within label elements? Is there a best practice or does it matter as long as they are linked by the “for” attribute?

I notice when I nest the input within the label element, it pushes the label text after the input field.
If I don’t nest it, the label comes before the input field.
It seems like there would be times when one instance would be better than the other and we should choose what works for our particular document, or even input type (for example: text inputs vs. radio buttons)?

2

Both are valid HTML and semantically correct, and both cover accessibility.

If you’re nesting the input inside of the label you can omit the for & id attributes because they’re already associated.
However, styling can become trickier having a child-parent relationship instead of, say, nesting both in a div like so:

<div>
  <label for="name">Name:</label>
  <input id="name">
</div>
4 Likes
3

Thank you very much, that makes sense.

2 Likes