Which is more "semantic HTML" for error messages?

In principle, the choice of element should be dictated by the meaning, not by "how and where you want to display" it (as @Babiker suggested). That's kind of the whole idea, not to mention the effects the choice will have on (for example) visually-impaired users (for whom the "where you display it" may be totally lost).

It does seem unfortunate that even HTML 5 doesn't have an element for this. Perhaps 'aside' (http://www.w3.org/TR/html5/sections.html#the-aside-element) would be the closest? The spec describes it in Section 4.3.5 as:

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.


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>