HTML: label tag

html label tag

explain html label tag

(ai answer)

HTML <label> tag

The <label> element creates a caption for a form control (like <input>, <textarea>, or <select>).

Why use it?

• Improves accessibility — screen readers announce the label with the control.
• Makes forms easier to use — clicking the label focuses or toggles the associated input (especially helpful for checkboxes and radio buttons).

How to associate a label with a control

1. Nest the control inside the label (implicit association)

<label>
  Email:
  <input type="email" name="email">
</label>

2. Use the for attribute (explicit association — recommended when the label and control are separate)

<label for="email">Email:</label>
<input type="email" id="email" name="email">

The value of for must match the control’s id.

Common attributes

That’s the core of the <label> tag — simple but important for usable, accessible forms.

using html label with css

show css so that the label and checkbox dont get cut into separate lines

(ai answer)

Here’s simple CSS to keep the checkbox and its label on the same line:

Option 1: Flexbox (recommended)

label {
  display: flex;
  align-items: center;
  gap: 6px;           /* space between checkbox and text */
  white-space: nowrap;
}

Option 2: Inline / nowrap

label {
  display: inline-block;
  white-space: nowrap;
}

Option 3: Prevent wrapping on the whole form row

.form-row {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

HTML example that works well with the CSS above

<label>
  <input type="checkbox">
  Remember me
</label>

or

<input type="checkbox" id="remember">
<label for="remember">Remember me</label>

The white-space: nowrap + display: flex combination is usually the most reliable.