Search code examples
htmlsemantic-markup

Is there a semantic tag or attribute (with value) for legend (outside table or form)?

Although I have asked myself this question for different cases that work outside a table (where you can use caption etc.), here is an example: I have a page with bar graphics with different colors which are the main content and above that I have some content (for now with tag <aside>) that describes all colors, just as a "legend".

So, what is the best choice here for semantics?
If there are many choices and "best" is ambiguous, let's say for Search Engine "data relevance".

Further thinking out loud: The <legend> tag is supposed to be for forms, that's a pitty. A role attribute ? But so many possibilities though still I don't really find the right one.

Solution

  • If I understand your example correctly, you shouldn’t use aside. The color legend is important for understanding the content, not just "tangentially related".

    HTML5 doesn’t provide a way to denote that some content is a legend (and nothing else!) for some other content.

    If you think your content is appropriate for figure, you can use the figcaption element for the legend.

    If you think your content is appropriate for table, you can use the caption element for the legend.

    Else, use a sectioning element (or body for a stand-alone document) with a header element, which "typically contains a group of introductory or navigational aids". Introductory seems to come close.

    <article><!-- or section -->
  <h1><!-- heading for your bar graphics --></h1>
  <div><!-- bar graphics --></div>
  <header><!-- color legend --></header>
</article>

    If the color legend is complex, and if it should appear in the document outline, it might be appropriate to give it its own section inside of the main content’s sectioning element.

    <article><!-- or section -->
  <h1><!-- heading for your bar graphics --></h1>
  <div><!-- bar graphics --></div>
  <header>
   <section>
     <h1>Color legend</h1>
     <!-- color legend -->
   </section>
  </header>
</article>

    All three ways are appropriate for marking up a legend; but they don’t express that it’s definitely a legend. figcaption, caption, and header can be used for other things, too.