15

When you display an error message in HTML, which element do you use, <span> or <label>?

Can you list some pros and cons for each of them, assuming that some styling, such as color and margin will be applied through their class?

1
  • 5
    This is not a duplicate of that question, which is about differences in how they render by default and not about which is better suited to any purpose (let alone the specific purpose mentioned in this question).
    – Quentin
    Jan 16, 2011 at 21:02

6 Answers 6

18

Assuming you mean an error message associated with a specific form control, use a <label>.

The semantic arguments are subject to debate, as they aren't clear cut in this case, but the practical arguments win quite nicely. If a screen reader is in forms mode, it may skip over non-label text thus hiding the error messages from the user.

1

Either can be used and both can be styled. I think the discussion will be about symantically which is more clear. I think of label elements as being associated with describing what a particular input element's intent. I don't feel displaying error info fits this and prefer the span.

1

AFAIK, the purpose of a label is that clicking on the label clicks the control that it is "for". This is very helpful for things like checkboxes and radio buttons, where the actual control is small and tricky to click.

0

I would suggest markup like this

<label for=i123>Full name:
<strong class=error>Full name must contain as least some whitespace in the middle.</strong>
<input id=i123 type=text name=fullname>
</label>

Rationale:

Having the label text and the error message within the same <label> allows screen readers to read all the text related to text input in known order. You should also try to use attribute pattern for the <input> element if you can describe the requirements that way. Even though the specs allow multiple label elements to be attached to single real world assistive technology is known to have problems with such content in practice. The <label> and <input> can be put next to each other long as you use for and id attributes - nesting allows removing those attributes if you want to minimize the markup. Historically MSIE had problems with <label> elements without for attribute.

-1

http://www.w3schools.com/tags/tag_label.asp: "The tag defines a label for an input element."

For regular inline text, use span.

2
  • 6
    Please don't recommend that site as a reference — w3fools.com – and it isn't "regular inline text", it is an error message, presumably associated with a specific input element.
    – Quentin
    Jan 16, 2011 at 20:57
  • @David Dorward: it was the first result on Google for "label html". But everyone is free to google it themselves and find a similar description of the tag on all the other pages. And I don't know if it's connected to an input field, since all OP stated was "When you display an error message in HTML". Anyways, I'm sure the difference is clear by now.
    – Alec
    Jan 16, 2011 at 21:04
-2

I'm likely to use <span> because each input field already has a <label> and it never occured to me to have two labels for one input field.


This answer was wrong: see comments below.

3
  • 2
    There is no limit to the number of labels that can be associated with a given form control.
    – Quentin
    Jan 16, 2011 at 21:02
  • @David Dorward - I guess that the schema definition language[s] isn't rich enough to detect/prevent/specify that multiple labels per input element aren't supported. Is there anywhere that says explicitly that they are supported? Is it a common idiom/practice? Do you expect that e.g. screen readers would be coded to expect/support multiple labels?
    – ChrisW
    Jan 16, 2011 at 21:07
  • 2
    "More than one LABEL may be associated with the same control" — w3.org/TR/html4/interact/forms.html#h-17.9.1
    – Quentin
    Jan 16, 2011 at 21:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.