html element for exemplary content

Question

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.

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:

<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>