Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 374
Ege Avatar asked May 16 '11 07:05

Ege


People also ask

What is the HTML tag for error message?

I believe you should use a <label> which directly associates the error message with the input element. The LABEL element may be used to attach information to controls. More than one LABEL may be associated with the same control by creating multiple references via the for attribute.

Is semantic HTML better?

Semantic HTML refers to syntax that makes the HTML more comprehensible by better defining the different sections and layout of web pages. It makes web pages more informative and adaptable, allowing browsers and search engines to better interpret content.

Which HTML used semantic tags?

HTML 5 introduced new semantic elements such as section , article , footer , progress , nav , aside , mark , and time .

What are HTML5 semantic?

Semantic HTML elements are those that clearly describe their meaning in a human- and machine-readable way. Elements such as <header> , <footer> and <article> are all considered semantic because they accurately describe the purpose of the element and the type of content that is inside them.


1 Answers

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>

like image 152
Gabriele Petrioli Avatar answered Sep 20 '22 14:09

Gabriele Petrioli