Why Use Span for Input Labels and Styling?-CodePudding

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 ></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 ></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?

CodePudding user response：

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

CodePudding user response：

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.

CodePudding user response：

Personally I have only ever used the <span> element for styling purposes. (similar to <div > 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

CodePudding user response：

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.

CodePudding user response：

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

CodePudding user response：

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/