Help me understand "Linking" elements

What is the purpose of “linking” elements with “for” and “id” ()?

fCC is saying " The id attribute is used to identify specific HTML elements. Each id attribute’s value must be unique from all other id values for the entire page.

Add an id attribute with the value indoor to the radio button. When elements have multiple attributes, the order of the attributes doesn’t matter.

  • Why do I need to add an “id” attribute as opposed to a “name” attribute? Aren’t they the same thing essentially? My code already has “Indoor” written as text:

<label><input type="radio"> Indoor</label>

Why can’t I just leave it like that ? (Why the “id” attribute?)


Linking a label to an input allows people using assistive technology (such as screen readers) to know what the input is for. Technically, if you nest the input inside of the label then you shouldn’t need the for attribute on the label because the link between the two should be implied. But there are a few very specific situations in which the implication doesn’t always work. So it is considered a best practice to always link the label to its input using the for attribute.

Because the for attribute only works when its value is set to the id of the input. It doesn’t work with the name attribute.

you can absolutely do that, but when you need to use “label” and “input” separately you need to have a way of “linking” these two elements together, and thats what you do with “for and id” attributes in “label and input” elements

also for “accessibility” and “conventional” uses its customary that we use “linking” between label and input elements in html

perhaps consider reading through this mdn article, would be helpful, <input>: The Input (Form Input) element - HTML: HyperText Markup Language | MDN happy reading :slight_smile: