HTML towards the tag: can I use forms to report errors?

Question

So, I have a form, and I will get error messages associated with each input element /. I came up with this use for the <aside> and wondered what people thought:

  <section class="fieldrow" id="rowJobTitle"> <label for="txtJobTitle" id="lblJobTitle"> <span>Job title:</span> </label> <input type="text" id="txtJobTitle" name="txtJobTitle"> <aside id="errJobTitle" class="errormessage"> <span role="alert">Please tell us your job title.</span> </aside> </section> 

Then I will use CSS to show or hide <aside> errors with a little JS to change this.

I know that I could just use span and work with it, but the span tag has no semantic meaning, and all the (short and undefined) information that I read on <aside> seems to say that there is no problem with this, but I was hoping that I could either get some kind of confirmation, or someone who had tried this before and found a good reason not to do this.

Thanks Si.

Answer 1

The <aside> supported in all major browsers.

There are, however, potentially more elegant ways to do this, and <aside> not particularly meaningful for what you mean. From the HTML5 specification :

A pending element is a section of a page that consists of content regarding content around the element and which can be considered separate from that content . Such sections are often presented as side panels in a print shop.

Your mistake is not really separated from the content, so this is a pretty unulocal choice.

You should see how Twitter Bootstrap makes line errors.

All that is said is semantics and, therefore, inherently subjective. If this makes sense to you, and it works, why not use it?

EDIT

After reading Rob's link, <aside> looks even more inappropriate than I thought. Since <aside> not a sub-element of <input> , there is no reason why the parser might think that it is associated with this <input> . I would not use it in this context.

MDN provides some use cases for this, and yours does not fit:

they often contain a lateral explanation, like the definition of a glossary, more loosely related things, such as advertising, a biography of an author, or in web applications, profile information or a related blog link.

Answer 2

The <aside> element is not supported by IE 8 and later. This means that any styles installed on it are lost in these browsers. You can partially get around this using JavaScript code that “teaches” the element to them, but is it all worth it? What is expected profit?

Logically, the described usage does not match the semantics of HTML5. The descriptions there are vague, but I don’t think that the error message can be described as tangential when it is displayed and relevant; this is really key content. It is not separate from the rest of the content; instead, he expresses important information about it.

Advertising will be a candidate for <aside> , and so there will be a joke, a story note or content in general that is not necessarily in any way, but has some connection with the main content.

I have not seen any evidence of any software such as search engines or browsers or browser add-ons that actually use <aside> markup. Just thinking about what you can do.

I think this is a fundamental flaw in the overall design, an even more theoretical question about the semantics of elements. What happens when CSS or JavaScript is disabled? Correctly, the user always sees an error message even if he does not enter input at all, or if the input is correct.

The best approach, assuming this is about errors detected in the client code, is to save the error message text only in JavaScript lines. When an error is detected, a new element is added or the existing content of the element is changed to make the error message available; and then it will be destroyed when the error is corrected. (No need to rely on CSS here.)

Thus, an error message can be placed in front of or below the field to the right of it. It doesn't matter what elements you use for it (search engines don’t see this, and browsers are unlikely to do anything special with it on their own), but <div><strong>...</strong></div> probably would be a good choice.

Answer 3

Since this is related to this article, and therefore the context (most important), this should be acceptable. I even think this is very useful. Watch this.

EDIT:. In the discussion, I think that there is no suitable semantic element for this, and a common div element would be the best to use. We are trying too hard to force the HTML5 element.