Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML aside tag: is it OK to use for form error message?

So I have a form and I'll have error messages associated with each input/element. I've come up with this use for the <aside> tag and was wondering 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'll be using CSS to show or hide the <aside> errors with a little JS to change this.

I know I could just use the span, and be done with it, but a span tag has no semantic value, and all the (short and vague) info I've read on <aside> seems to say there's no problem with this, but I was hoping that I could either get some confirmation, or someone who's tried this before and found a good reason not to.

Thanks, Si.

like image 615
simey.me Avatar asked Dec 29 '11 16:12

simey.me


People also ask

When should you use Aside HTML?

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.

What is the HTML tag for error message?

There is no right tag to use for an error message. It all depends on how and where you want to display the error. Once you decide on these things, your choices will be narrowed, as tag properties and limitations differ.

Which type of content should use aside?

The <aside> element is used to identify content that is related to the primary content of the webpage, but does not constitute the primary content of the page. Author information, related links, related content, and advertisements are exampes of content that may be found in an aside element.

Should Aside be inside main?

Following the newer definition, the aside element should be inside of the section element to which it is related. The main element is not a sectioning element (elements like article , section , body , figure etc. are).


1 Answers

The <aside> tag is supported in all major browsers.

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

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.

Your error is not really separate from the content, so it's a fairly inappropriate choice.

You should look at how Twitter Bootstrap does in-line form errors.

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

EDIT

Upon reading Rob's link, <aside> looks even more inappropriate than I thought. Since <aside> is not a sub-element of the <input>, there is no reason a parser would think it related to that <input>. I would avoid its usage in this context.

MDN gives some use cases for this, and yours doesn't fit:

they often contains side explanation like a glossary definition, more loosely related stuff like advertisements, the biography of the author, or in web-applications, profile information or related blog links.

like image 157
Josh Smith Avatar answered Oct 26 '22 22:10

Josh Smith