Why can't ID attribute not be nested in label attribute?

[michoel72]

why can't ID attribute not be nested in label attribute?
Like this:
<label id="indoor"><input type="radio"> Indoor</label>
It seems that proper coding requires this:
<label><input id="indoor" type="radio"> Indoor</label>

 

[VBService]

The reason the id attribute is typically not nested within the label element is related to the way these HTML elements are structured and their respective purposes.

In HTML, the <label> element is used to create a label for an input element (such as an <input> or <select> element). The for attribute of the <label> element is used to associate the label with a specific input element. When you click on the label, it triggers the associated input element. This association is typically established by the for attribute like this:

<label for="indoor">Indoor</label>
<input type="radio" id="indoor">

<label for="indoor"><input type="radio" id="indoor">Indoor</label>

 

[michoel72]

I did exactly as requested and entered this code but still will not work:
<label for="loving">Loving</label>
<input type="checkbox" id="loving">

Here is what is requested:

Step 56​

Attached is what is requested by the test

 

[michoel72]

solved it!

 

[VBService]

Check this
[ code on-line ]

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
body {
  display: flex;
  place-content: center;
  align-items: center;
}
.container {
  position: relative;
  max-width: 450px;
  border: 2px solid gray;
  border-radius: .25rem;
  outline: 1px solid gray;
  outline-offset: 3px;
  font: 400 .93rem/1.4 system-ui, monospace;
  padding: 1rem;
}
.container input {
  display: none;
}
.container label {
  position: absolute;
  bottom: -.6rem;
  background-color: gray;
  color: white;
  padding: 0 .5rem;
  border-radius: .5rem;
  cursor: pointer;
  font-size: 80%;
}
span.highlighted {
  display: inline-block;
  margin: .1rem;
  padding: 0 .12rem;
  border: 1px solid transparent;
  background-color: transparent;
}
.container input:checked ~ p span.highlighted {
  border-color: black;
  background-color: lightgrey;
  transition: all 350ms;
}
.container input:not(:checked) ~ p span.highlighted {
  transition: all 350ms; 
}

<div class="container">
  <label for="Highlighter">Highlighter</label>
  <input type="checkbox" id="Highlighter">

  <h3>Step 56</h3>
  <p>
    There's another way associate an <span class="highlighted">input</span> element's text with the
    element itself. You can nest the text within a <span class="highlighted">label</span> element and add
    a <span class="highlighted">for</span> attribute with the same value as the <span class="highlighted">input</span> element's <span class="highlighted">id</span> attribute.
  </p>
  <p>
    Associate the text <span class="highlighted">Loving</span> with the checkbox by nesting only the text <span class="highlighted">Loving</span> in a <span class="highlighted">label</span> element and giving it an appropriate <span class="highlighted">for</span> attribute.
  </p>
</div>

 

[michoel72]

Thank you!