'Why Use Span for Radio Button or Checkbox Labels?

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?

htmlcss


Solution 1:[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

Solution 2:[2]

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.

Solution 3:[3]

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

Solution 4:[4]

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

Solution 5:[5]

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.

Solution 6:[6]

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/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Pyjcoder
Solution 2 Programnik
Solution 3 mugeshmuthukumaran
Solution 4 mrt
Solution 5 prograk
Solution 6 Dfx

Related Questions