<p> vs <label> . when to use one or the other

In the example survey form it seems a label tag is used for one word but a p tag is used for multiple words. Is the number of words the dividing line between when one should be used vs the other? Is it ok to just use label all the time around text that describes a form control?

In a form, a label is tightly linked to the input. It is how you identify a field. A label should always be a label for something.

A paragraph is used in a form when you need to present added information. You may want to break a form into sections and give an introduction to each section, explain what the data is used for, or tell the user what sort of information they should enter.

In the example survey form the p tag is used like this:

  <p>Which option best describes your current role?</p>
  <select id="dropdown" name="role" class="form-control" required>
    <option disabled selected value>Select current role</option>
   ...
  </p>

So I guess a label needs to be used for a specific choice or not at all?
In the example, for the radio control, each choice is nested within a label.
Seems so simple but I’m still confused.

Not necessarily.
You cold do

<label> Role: 
    <select....
    </select>
</label>

“Which option best describes your current role?” is more of a long-form explanatory text though. It has a different logical relationship with the input and it also would often visually appear differently than a simple label.

Try to remember that this isn’t an exact science.

1 Like