Search code examples
htmlsemantic-markup

Which is more "semantic HTML" for error messages?


We were discussing with a co-worker and trying to decide on what HTML element to use for a form validation error message.

One of us is saying that we should use a span or a div because it is a part of an input field, and the other is saying that it should be a p element because it is a text.

What do you guys think?


Solution

  • I believe you should use a <label> which directly associates the error message with the input element.

    quoting the W3 specs

    The LABEL element may be used to attach information to controls.

    and

    More than one LABEL may be associated with the same control by creating multiple references via the for attribute.


    See also Error Message: <span> vs <label>