Why Use Span for Radio Button or Checkbox Labels?

Question

I've seen several sites use the following code for a radio input layout:

<label>
  <input type="radio" name="myRadioBtn">
  <span>Check me!</span> <!-- Notice the span wrapped text -->
  <div class="custom-radio"></div>
</label>

while I've also seen a few sites with the following:

<label>
  <input type="radio" name="myRadioBtn"> Check me! <!-- Notice the missing span -->
  <div class="custom-radio"></div>
</label>

Are there any benefits to wrapping the input label text in a span tag? Is it easier to style the input elements? Or to call them with Javascript/jQuery?

Programnik · Accepted Answer · 2022-03-28 04:49:31Z

3

Using a span means you can style the radio text without affecting anything else in the parent div. And spans wrap as well. Spans totally rock.

answered Mar 28, 2022 at 4:49

Programnik

1,5591 gold badge10 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pyjcoder · Accepted Answer · 2022-03-28 04:52:17Z

1

The <span> HTML element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate. <span> is very much like a <div> element, but <div> is a block-level element whereas a <span> is an inline element.

see this:- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span

answered Mar 28, 2022 at 4:52

Pyjcoder

735 bronze badges

Comments

mugeshmuthukumaran · Accepted Answer · 2022-03-28 04:49:00Z

0

Span uses less space. Div is a block that will have a bigger space. if we want to use things in compact we use SPAN tag

According to this.

Span and input tag uses the same line

answered Mar 28, 2022 at 4:49

mugeshmuthukumaran

11 bronze badge

1 Comment

abatista Over a year ago

Your post is missing the hyperlink.

mrt · Accepted Answer · 2022-03-28 04:50:20Z

0

Personally I have only ever used the <span> element for styling purposes. (similar to <div class="container"> but span takes up less space)

Hubspot.com defines them as 'a generic inline container element'.

This article explains a bit more about them: https://blog.hubspot.com/website/html-span

mrt

answered Mar 28, 2022 at 4:50

mrt

753 silver badges13 bronze badges

Comments

prograk · Accepted Answer · 2022-03-28 04:50:43Z

0

Span is a inline element and will not take 100% width available, and also there's no browser default styles or reset css styles applied to span, so less css automatically. Div is a block level element and places where you don't need a block element no point using it.

answered Mar 28, 2022 at 4:50

prograk

5714 silver badges15 bronze badges

Comments

Dfx · Accepted Answer · 2022-03-28 04:55:13Z

0

span will be in same line , if you don't want input and its label in same line you can use <p> or <div> tag

check this https://www.geeksforgeeks.org/difference-between-div-and-span-tag-in-html/

answered Mar 28, 2022 at 4:55

Dfx

651 silver badge8 bronze badges

Collectives™ on Stack Overflow

Why Use Span for Radio Button or Checkbox Labels?

6 Answers 6

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related