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.

  • 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.
    – user
    Commented Jan 21, 2014 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
    Commented Jan 22, 2014 at 9:45

1 Answer 1


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:



  <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>
    <figcaption>Example 1. A grocery list.</figcaption>

  • 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. Commented Jan 23, 2014 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
    Commented Jan 23, 2014 at 11:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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