Description

An illustratration of a key concept of the work, such as a code listing, case study or problem.

Examples

Example 1 — Figure example
<figure role="doc-example" aria-labelledby="ex01-hd">
   <figcaption>
      <p class="hd" id="ex01-hd">Example 1 — Glucose Molecule</p>
      
      <details>
         <summary>Description</summary>
         <p>The 6 carbon atoms are ordered …</p>
       </details>
   </figcaption>
   
   <img src="glucose.jpeg" alt="C6H1206" aria-describedby="glucose-desc"/>
</figure>
Example 2 — Code example
<p>The most basic hello world example:</p>
   <pre role="doc-example">print "Hello World!";</pre>
<p>can be executed after compiling …</p>

Relation to ARIA

doc-example inherits its semantics from the a section role (i.e., it represents a container of related content, but is not a landmark).

Usage

doc-example is typically used on figure and pre elements.

List of all elements allowed on
  • a (without an href attribute)
  • abbr
  • address
  • aside
  • b
  • bdi
  • bdo
  • blockquote
  • br
  • canvas
  • cite
  • code
  • del
  • dfn
  • div
  • em
  • i
  • img (with alt text)
  • ins
  • kbd
  • mark
  • output
  • p
  • pre
  • q
  • rp
  • rt
  • ruby
  • s
  • samp
  • section
  • small
  • span
  • strong
  • sub
  • sup
  • table
  • tbody
  • td
  • tfoot
  • thead
  • th
  • tr
  • time
  • u
  • var
  • wbr

Related Links