Which is more "semantic HTML" for error messages?

html semantic-markup
Ege picture Ege · May 16, 2011 · Viewed 9.2k times · Source

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?

Answer

Gabriele Petrioli picture Gabriele Petrioli · May 16, 2011

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>

Related questions

<code> vs <pre> vs <samp> for inline and block code snippets

My site is going to have some inline code ("when using the foo() function...") and some block snippets. These tend to be XML, and have very long lines which I prefer the browser to wrap (i.e., I don't want …

Read More
Should I use <i> tag for icons instead of <span>?

Facebook's HTML and Twitter Bootstrap HTML (before v3) both use the <i> tag to display icons. However, from the HTML5 spec: The I element represents a span of text in an alternate voice or mood, or otherwise offset …

Read More
CSS/HTML: What is the correct way to make text italic?

What is the correct way to make text italic? I have seen the following four approaches: <i>Italic Text</i> <em>Italic Text</em> <span class="italic">Italic Text</…

Read More