Are radio buttons supposed to be nested in labels or not?

HTML-CSS
1

I’m working on basic HTML and it says
“Add a pair of radio buttons to your form, each nested in its own label element. One should have the option of indoor and the other should have the option of outdoor . Both should share the name attribute of indoor-outdoor to create a radio group.”

However the example code they give doesn’t work. It says
" One of your radio buttons should have the label indoor."
" One of your radio buttons should have the label outdoor."

Which I do. When I went to watch the video, the solution they give says you don’t nest the buttons in a label. Instead it shows

<input id="indoor" type="radio" name="indoor-outdoor">
<label for="indoor">Indoor</label>
<input id="outdoor" type="radio" name="indoor-outdoor">
<label for="outdoor">Outdoor</label>

In googling other examples this is the format used as well, though some will define the label before the input. So I’m really confused what the proper method is. Why is it telling me to nest a button within a label if that’s not how it’s done?

Your code so far


<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>

<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

<p>Things cats love:</p>
<ul>
  <li>cat nip</li>
  <li>laser pointers</li>
  <li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
  <li>flea treatment</li>
  <li>thunder</li>
  <li>other cats</li>
</ol>
<form action="/submit-cat-photo">
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>

  <label for="indoor">
    <input id="indoor" type="radio" name="indoor-outdoor">
  </label>

  <label for="outdoor">
    <input id="outdoor" type="radio" name="indoor-outdoor">
  </label>
</form>
</main>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:71.0) Gecko/20100101 Firefox/71.0.

Challenge: Create a Set of Radio Buttons

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons

2

generally, you can use both nested and not nested label/input couples (if the label has the appropriate for attribute)

for this challenge you need to make them nested.
Your issue is that you are missing the required text inside the label