Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

What would be an appropriate html element to use for a block exemplary content in an article, which illustrates the more abstract rules described earlier?

For semantic / accessibility reasons I want to make it clear in the markup that this part of the content is an example. In the graphic design I'm implementing it looks like a block quote, but since this example is not really a quote, <blockquote> seems awkward to use.

share|improve this question
    
Why do you need a HTML element? What's wrong with <div class="example">...</div> or for that matter depending on the rendering you want <span class="example">...</span>? You can then put whatever presentation you want on the example class. –  Michael Kjörling Jan 21 at 14:46
1  
We've reopened it here. It's a tricky one overall because accessibility is very much on-topic for UX, but HTML Semantics really isn't. Hence why we were unsure what to do with this post (it had sat dormant on here for a while with no answers and low view numbers before it was migrated). It was discussed with SO and programmers.se mods and we went with a migration to SO, but that probably wasn't the best target either. Provided we keep the answers directly around Accessibility then hopefully you can get some good UX answers here. –  JonW Jan 22 at 9:45
add comment

1 Answer

up vote 5 down vote accepted

A <div>, as suggested in the comments, would definitely be a better option than a <blockquote>, because having no semantics isn't as bad as having incorrect semantics. Accessibility tools would simply process your exemplary content just like they would the rest of the article content, which is far better than them processing it completely incorrectly and contrary to your intentions.

That being said, I believe the <figure> element is well-suited for your purpose:

The figure element represents some flow content, optionally with a caption, that is self-contained (like a complete sentence) and is typically referenced as a single unit from the main flow of the document.

The HTML5 spec that I link to contains numerous example uses, but strangely the spec itself uses a <div> element to mark up its examples. But I would argue that <figure> is more suitable, given its definition.

You can give it an example class as well, i.e. <figure class="example">, should you need to target only these <figure> elements specifically with CSS.

Here's an example (heh) of an article with an example marked up using a <figure> element:

<article>

  <h2>Lists</h2>

  <p>A list is a set of items, often related, presented as a group.
     A typical list is formatted with either bullet points if it
     does not have an order, or numbers if the items are arranged
     in a specific order. It can also be formatted as a table.

  <figure class="example" id="ex1">
    <h3>Grocery list</h3>
    <ul>
        <li>Bread
        <li>Eggs
        <li>Milk
    </ul>
    <figcaption>Example 1. A grocery list.</figcaption>
  </figure>

</article>
share|improve this answer
    
Thank you, this is exactly the type of answer I was hoping for. I had always associated <figure> with images and graphs, but obviously that's not correct. –  marcvangend Jan 23 at 7:45
    
@marcvangend: Well, most "figures" are diagrams and images, that's why <figure> is most often used and demonstrated with those things. Glad I could help! –  BoltClock Jan 23 at 11:06
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.