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?
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.
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.
HTML 5 introduced new semantic elements such as section , article , footer , progress , nav , aside , mark , and time .
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With