# Nesting \<label\>

**URL:** <https://forum.freecodecamp.org/t/nesting-label/462466>\
**Category:** Curriculum Help\
**Tags:** css, html\
**Created:** [May 29, 2021, 7:12am UTC](https://forum.freecodecamp.org/t/nesting-label/462466 "2021-05-29T07:12:58Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![teamie](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/teamie/32/254679_2.png) [@teamie](https://forum.freecodecamp.org/u/teamie)\
**Post date:** [May 29, 2021, 7:12am UTC](https://forum.freecodecamp.org/t/nesting-label/462466/1 "2021-05-29T07:12:58Z")

</div>

Is it possible to nest a `<label>` in another` <label>` in case of radio buttons like this:

```auto
**<label** for="sex"> Sex : <label for="male"><input type="radio" name="sex" id="male"></label> <label for="female"><input type="radio" name="sex" id="female"></label> **</label>**

```

My reason is if I separate the “Sex” from both labels there’s a gap in between both elements which I really want to get rid off and I was hoping this would still work if I have the code that way?

---

<div class="post-metadata">

**Author:** ![jwilkins.oboe](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jwilkins.oboe/32/179497_2.png) [@jwilkins.oboe](https://forum.freecodecamp.org/u/jwilkins.oboe)\
**Post date:** [May 29, 2021, 7:38am UTC](https://forum.freecodecamp.org/t/nesting-label/462466/2 "2021-05-29T07:38:20Z")

</div>

Hi @teamie !

If you run your code through the [html validator](https://validator.w3.org/) then you will find that you can’t do that because it will come back with errors.

Try running this code and you can see the error messages for yourself.

```auto
<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="utf-8">

  <title>Labels</title>

</head>

<body>
  <label for="sex"> Sex : <label for="male"><input type="radio" name="sex" id="male"></label> <label for="female"><input type="radio" name="sex" id="female"></label></label>
</body>

</html>

```

* * *

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (`</>`) to add backticks around text.

 ![Pre-formatted-text](https://global.discourse-cdn.com/freecodecamp/original/3X/1/b/1b18854f1059217f29370444396145cc3a0cd8ae.gif)

See [this post](https://forum.freecodecamp.org/t/forum-code-formatting/25574) to find the backtick on your keyboard.  
**Note:** Backticks (`) are not single quotes (’).

---

<div class="post-metadata">

**Author:** ![a\_aramini](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/a_aramini/32/218659_2.png) [@a\_aramini](https://forum.freecodecamp.org/u/a_aramini)\
**Post date:** [May 29, 2021, 7:47am UTC](https://forum.freecodecamp.org/t/nesting-label/462466/3 "2021-05-29T07:47:13Z")

</div>

It is a label, so it is just text the user sees.

How things look to you in the code aren’t necessarily how it will render on the page that the user of the page will see.

Nesting that way is not “valid” html because of the way the html interpreter parses the html, and also, it is easy to forget to close a tag in very long code/page with lots of tags.

You want the code, over all, to be easily readable by your future self and other developers to find and fix errors and easily see which closing tags belong with which opening tags.

For situations where layout, spacing, styling matters, you will learn about styling, spacing, positioning, in the CSS portion of the curriculum.

---

<div class="post-metadata">

**Author:** ![teamie](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/teamie/32/254679_2.png) [@teamie](https://forum.freecodecamp.org/u/teamie)\
**Post date:** [May 29, 2021, 11:20am UTC](https://forum.freecodecamp.org/t/nesting-label/462466/4 "2021-05-29T11:20:58Z")

</div>

Thank you @jwilkins.oboe I guess I’ll have to try using CSS to fix the error instead.

---

<div class="post-metadata">

**Author:** ![teamie](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/teamie/32/254679_2.png) [@teamie](https://forum.freecodecamp.org/u/teamie)\
**Post date:** [May 29, 2021, 11:23am UTC](https://forum.freecodecamp.org/t/nesting-label/462466/5 "2021-05-29T11:23:47Z")

</div>

Thank you for the analysis @a_aramini will put these into consideration. Still trying to totally grasp my CSS that’s why I tried compromising with the `<label>` tag.

---

<div class="post-metadata">

**Author:** ![a\_aramini](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/a_aramini/32/218659_2.png) [@a\_aramini](https://forum.freecodecamp.org/u/a_aramini)\
**Post date:** [May 29, 2021, 11:38am UTC](https://forum.freecodecamp.org/t/nesting-label/462466/6 "2021-05-29T11:38:35Z")

</div>

If you get stuck and need help with the CSS, you can also paste your full HTML and CSS code in a new topic, describing your CSS issue (making sure to format it as @jwilkins.oboe instructed above).

Or provide a link to your Codepen or Github if you are using those, so someone could take a look and guide you in the right direction.

It would clarify and help us better understand what you mean by:

> [@teamie](#):
>
> My reason is if I separate the “Sex” from both labels there’s a gap in between both elements which I really want to get rid off

If I change the code you have pasted here so far to this:

```auto

<html lang="en">

<head>
  <meta charset="utf-8">

  <title>Labels</title>

</head>

<body>
Sex:
<label for="male"><input type="radio" name="sex" id="male" value ="male">male</label>
<label for="female"><input type="radio" name="sex" id="female" value="female">female</label>
</body>

</html>

```

It looks like this:  
 ![image](https://global.discourse-cdn.com/freecodecamp/original/3X/7/d/7df518f6377f2759d57587b63aebadf065d01164.png)

I see spaces between the label and first radio button, and between both radio buttons, if that’s what you’re referring to. But it’s hard to know exactly what you want by going off of just just that code.

Also, I noticed you haven’t put a `value=` attribute in your radio buttons, don’t forget to do that or the form will have no data to post for those fields. If one is selected and there is no `value=` then the default value will be “on” which is ambiguous data because you will have no way of knowing _which_ one is selected.

---

<div class="post-metadata">

**Author:** ![DanCouper](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dancouper/32/158608_2.png) [@DanCouper](https://forum.freecodecamp.org/u/DanCouper)\
**Post date:** [May 29, 2021, 12:40pm UTC](https://forum.freecodecamp.org/t/nesting-label/462466/7 "2021-05-29T12:40:55Z")

</div>

You don’t use HTML elements to do this, not the way you’re trying to do. `<label>` has specific meaning (it is literally a label for a specific input), it’s not a way to style things. You can’t put a label in a label because it doesn’t make sense. Yes, you use CSS for this.

---

<div class="post-metadata">

**Author:** ![a\_aramini](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/a_aramini/32/218659_2.png) [@a\_aramini](https://forum.freecodecamp.org/u/a_aramini)\
**Post date:** [May 29, 2021, 3:50pm UTC](https://forum.freecodecamp.org/t/nesting-label/462466/8 "2021-05-29T15:50:34Z")

</div>

> [@DanCouper](#):
>
> You can’t put a label in a label because it doesn’t make sense.

Yes, that.

I did a poor job of trying to generally convey this:

 ![image](https://global.discourse-cdn.com/freecodecamp/original/3X/5/2/52ed63fffdf891b7d931f36cb07e58b28835fede.png)

I don’t know the impact of doing it the “incorrect” way as shown in that graphic as far as how different browsers will interpret and render (if at all) the page or if it would cause anything other than a warning in a validator. I’ve haven’t tested it (easy to test though). But I learned that you aren’t supposed to do it that way.

I think if you have a lot of that kind of spaghetti going on in your HTML, a lot of improperly nested tags `n` levels deep, it would at the very least, be confusing for a human to read… and, of course, it is outside of the HTML specifications.

---

<div class="post-metadata">

**Author:** ![teamie](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/teamie/32/254679_2.png) [@teamie](https://forum.freecodecamp.org/u/teamie)\
**Post date:** [May 30, 2021, 1:33am UTC](https://forum.freecodecamp.org/t/nesting-label/462466/9 "2021-05-30T01:33:11Z")

</div>

Thank you for the explanation @a_aramini. I was able to separate all `<label>` tags and instead I made use of CSS to adjust the distance between the elements and yes I did put having the `value` attr into consideration. This is the original code which I am currently working on:

```auto
<label for="test-urgency">Test Urgency:</label>

<label for="yes">
    <input type="radio" 
            name="test-urgency"
            value="yes"
            id="yes">Yes
            
</label>

<label for="no">
    <input type="radio"
            name="test-urgency"
            id="no"
            value="no"
            checked >No
</label>

```

This is what it looks like:  
 ![Screenshot 2021-05-30 093128](https://global.discourse-cdn.com/freecodecamp/original/3X/7/f/7fc9b8a859c07c7087e61a1d09f1557d1db570e4.jpeg)

Do you think there’s a better way to have nested this?

---

<div class="post-metadata">

**Author:** ![teamie](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/teamie/32/254679_2.png) [@teamie](https://forum.freecodecamp.org/u/teamie)\
**Post date:** [May 30, 2021, 1:37am UTC](https://forum.freecodecamp.org/t/nesting-label/462466/10 "2021-05-30T01:37:01Z")

</div>

It actually made no sense to me at first I was probably just compromising now I know better than to try using HTML for styling instead of CSS. Thanks @DanCouper

---

<div class="post-metadata">

**Author:** ![a\_aramini](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/a_aramini/32/218659_2.png) [@a\_aramini](https://forum.freecodecamp.org/u/a_aramini)\
**Post date:** [May 30, 2021, 4:26am UTC](https://forum.freecodecamp.org/t/nesting-label/462466/11 "2021-05-30T04:26:42Z")

</div>

That looks good to me. Good job!

One thing I should also mention is that you really don’t need the

```auto
for="test-urgency"

```

in

```auto
<label for="test-urgency">Test Urgency:</label>

```

“Test Urgency” is just a label for the fields as a group of inputs, but by itself, it has no inputs.

It is just a caption, a descriptor, for all of the related radio inputs.

So you could just do this:

```auto
<label>Test Urgency:</label>

```

You could also use the `<legend>` tag for that.

There’s also a `<fieldset>` tag which is used to group related elements in a form.

You could do something like this:

```auto
<fieldset>
<legend>Test Urgency:</legend> 

<label for="yes">
    <input type="radio" 
            name="test-urgency"
            value="yes"
            id="yes">Yes
</label>
<label for="no">
    <input type="radio"
            name="test-urgency"
            id="no"
            value="no"
            checked >No
</label>
</fieldset>

```

You don’t necessarily have to use the `<fieldset>` tag, it groups related elements in a form together and draws a box around the related elements. So maybe you don’t want to wrap everything in that tag. That’s up to you.

[HTML Fieldset Tag](https://www.w3schools.com/tags/tag_fieldset.asp)

The `<legend>` tag defines a caption for the element.

[HTML Legend Tag](https://www.w3schools.com/tags/tag_legend.asp)

Then you do your styling and positioning accordingly using CSS.

If you don’t want to mess up your current existing code, you can experiment with it in the w3schools “Try It” editor:

[Try It Editor - Fieldset tag](https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_fieldset_css)

Something to keep in mind when designing a form is that it’s not just the presentation and accessibility to the user that is important.

You’re asking for that form data for a reason 😃

The form data is ultimately going to be sent to a script on a server (Node.js, PHP, Python, etc) for processing on the back-end to be stored in a database, perform some calculation and send it back to the page, or populate data in some other page or something like that.

So you want the associated labels, descriptors, values, etc on the front end (the form fields, inputs etc.,) to make sense when they are received on the back-end.

That makes it easier for the back-end developer (yourself or someone else) to write the program logic in the script which handles the data on the back-end.

For the HTML projects on FCC, I don’t think it’s actually sending your data anywhere, but in a real world use case, it would.

---

<div class="post-metadata">

**Author:** ![teamie](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/teamie/32/254679_2.png) [@teamie](https://forum.freecodecamp.org/u/teamie)\
**Post date:** [May 30, 2021, 6:24am UTC](https://forum.freecodecamp.org/t/nesting-label/462466/12 "2021-05-30T06:24:11Z")

</div>

Thank you so much @a_aramini this was really really helpful… I have adjusted my code accordingly.

```auto
<fieldset>
    <legend>Test Urgency:</legend>

    <label for="yes">
        <input type="radio" 
                name="test-urgency"
                id="yes">Yes
    </label>
    
    <label for="no">
        <input type="radio"
                name="test-urgency"
                id="no" 
                checked >No
    </label>
</fieldset>

```

Also used some CSS to style it to look like :  
 ![Screenshot 2021-05-30 141951](https://global.discourse-cdn.com/freecodecamp/original/3X/b/2/b2a9e2428edf7713645a039f2ccf3e1accf7269b.jpeg)

In terms of appearance I’m not quite sure if this is acceptable in a form… or what do you think?

Here’s a copy of my CSS:

```auto
fieldset{
    width:150px;
    margin-left: 270px;
    padding-right: 50px;
    display: flexbox;
}

```

---

<div class="post-metadata">

**Author:** ![a\_aramini](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/a_aramini/32/218659_2.png) [@a\_aramini](https://forum.freecodecamp.org/u/a_aramini)\
**Post date:** [May 30, 2021, 6:34am UTC](https://forum.freecodecamp.org/t/nesting-label/462466/13 "2021-05-30T06:34:47Z")

</div>

Yes, that looks really nice!

I personally like the way `<fieldset>` groups everything together nicely, makes it more clear to the user filling out the form. That’s just my personal opinion though.

Some key things to be keep in mind when designing forms:

- Make sure the HTML tags and CSS are used correctly

- Make sure the form makes sense in terms of usability by the user filling it out

- Make sure you have defined a `value` attribute for all inputs.

- Make sure you haven’t mixed up your names and values so that it makes sense on the the back-end.

With those points satisfied, the layout, positioning, style, decorations, colors, etc all come down to your personal preference.

Good job!

---

<div class="post-metadata">

**Author:** ![teamie](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/teamie/32/254679_2.png) [@teamie](https://forum.freecodecamp.org/u/teamie)\
**Post date:** [May 30, 2021, 9:39am UTC](https://forum.freecodecamp.org/t/nesting-label/462466/14 "2021-05-30T09:39:58Z")

</div>

Thanks so much @a_aramini for taking your time to explain all of these extensively… It was really helpful 😄

---

<div class="post-metadata">

**Author:** ![a\_aramini](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/a_aramini/32/218659_2.png) [@a\_aramini](https://forum.freecodecamp.org/u/a_aramini)\
**Post date:** [May 30, 2021, 9:44am UTC](https://forum.freecodecamp.org/t/nesting-label/462466/15 "2021-05-30T09:44:44Z")

</div>

You’re welcome! It also helped me clarify in my own head while trying to clarify it to you, as I haven’t done HTML or forms in quite a while. And, I wanted it to be useful and make sense to other users if they search the forum and are having a similar issue. 😉

If I have any errors or mistakes, I definitely welcome corrections. I don’t want to give anyone misinformation 😃

---

<div class="post-metadata">

**Author:** ![teamie](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/teamie/32/254679_2.png) [@teamie](https://forum.freecodecamp.org/u/teamie)\
**Post date:** [May 30, 2021, 1:37pm UTC](https://forum.freecodecamp.org/t/nesting-label/462466/16 "2021-05-30T13:37:17Z")

</div>

Thanks a lot once again @a_aramini … Looking forward to uploading it on the `MySQL server` and testing out the functionality of the form with all corrections made.

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [November 29, 2021, 1:37am UTC](https://forum.freecodecamp.org/t/nesting-label/462466/17 "2021-11-29T01:37:19Z")

</div>

Closed on November 29, 2021, 1:37am UTC

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.