Show errors in html | What tag should i use?
Normally, I think errors, such as when a login fails, are displayed using a div with class=error
or something to that effect. Divs are semantically meaningless, so I wondered if there was a better node for displaying errors in html.
TLDR: Use a <p class="error">
with a message inside the <p>
. It is not semantically meaningful, but it is the option used by w3.org on the html5 spec and there is not an option that is explicitly better.
The candidates I'm considering are:
-
<em>
-
<strong>
-
<mark>
After some reading, i do not believe there is an explicit, ideal tag for denoting error messages in an html document.
Specifically, on w3.org's html spec page there is a standout element that appears to be very important but does not use any semantic tags to denote its specific importance. Instead, it uses a <p>
, a <span>
and css styling. This is the tag:
<p class="XXX annotation">
<span><a href="http://www.w3.org/html/wg/tracker/issues/41">ISSUE-41</a> (Decentralized-extensibility) blocks progress to Last Call</span>
</p>
Furthemore, w3.org has an example warning that simply uses a <p class="warning">
:
<p class="warning">This is a warning.</p>
So. I guess a <p>
with class="warning" or error is the right way to go. I find this somewhat disappointing, but honestly ... it isn't that important & i should have been doing more important work instead of figuring this out.
<em>
tag
This seems completely unsuitable as "The placement of emphasis changes the meaning of the sentence." Generally an error message is standalone and provides important information about a PAGE and does not specifically change the meaning of an individual sentence.
Furthermore, w3.org states:
The em element also isn't intended to convey importance; for that purpose, the strong element is more appropriate.
From w3.org:
The em element represents stress emphasis of its contents.
The level of emphasis that a particular piece of content has is given by its number of ancestor em elements.
The placement of emphasis changes the meaning of the sentence. The element thus forms an integral part of the content. The precise way in which emphasis is used in this way depends on the language.
<strong>
tag
The <strong>
tag seems like a strong candidate, as it does denote importance. However, it seems it denotes importance to the page/document, rather than importance regarding the specific context the user is in.
From w3.org:
The strong element represents strong importance for its contents.
The relative level of importance of a piece of content is given by its number of ancestor strong elements; each strong element increases the importance of its contents.
Changing the importance of a piece of text with the strong element does not change the meaning of the sentence.
And it provides an example stating:
Here is an example of a warning notice in a game, with the various parts marked up according to how important they are:
The entire notice is NOT in a <strong>
. Rather PARTs of the notice are in a <strong>
& the full message is in a <p>
<mark>
tag
<mark>
apperas to be primarily intended for denoting content within prose that is espcially meaninful in the specific context. Since error messages are rarely a part of prose, i'm not sure it is semantically accurate to use <mark>
to denote an error message.
From w3.org's html5 spec:
When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its likely relevance to the user's current activity.
The full description from the html5 spec:
The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. When used in a quotation or other block of text referred to from the prose, it indicates a highlight that was not originally present but which has been added to bring the reader's attention to a part of the text that might not have been considered important by the original author when the block was originally written, but which is now under previously unexpected scrutiny. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its likely relevance to the user's current activity.
Notifying w3.org
I tried to submit the following message on w3.org, but was sent to an error page.
Is there a tag explicitly useful for denoting error messages on a page? Such as if a login attempt fails & i wish to report "The password is incorrect".
<mark>
seems like a viable candidate, but it specifies its intention for use in prose, so i think it just barely misses the mark.
<strong>
seems appropriate, but the example given for<strong>
(a warning message) has the entire message wrapped in a<p>
, rather than a<strong>
, indicating that the warning message itself is not<strong>
, but only PARTS of the warning message are<strong>
. So i do not think this option is strong.Furthermore, under section "1.7.2 Typographic conventions" there is an example "This is a warning" wrapped in a
<p>
with class "warning".I believe adding such a tag or expanding the use of an existing tag could be useful for search engines & other automatic systems to ignore certain parts of a page that are contextually important for the specific user, but not important to the meaning of the page itself.
Thank you! Reed