Question

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.

Answer 1

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.