Search code examples
htmlsemantic-markup

Is there a caption for pre code?


There's <caption> for tables and <figcaption> for figures, but what's the correct tag for pre?

(The intention is to have a caption for a listing, but it seems <listing> has been removed, so <pre> is used instead.)


Solution

  • A figure can depict a code listing, so just place the <pre> within a <figure> and use <figcaption> for the caption. The spec contains an example of exactly this:

    This example shows the figure element to mark up a code listing.

    <p>In <a href="#l4">listing 4</a> we see the primary core interface
    API declaration.</p>
    <figure id="l4">
     <figcaption>Listing 4. The primary core interface API declaration.</figcaption>
     <pre><code>interface PrimaryCore {
     boolean verifyDataLine();
     void sendData(in sequence&lt;byte> data);
     void initSelfDestruct();
    }</code></pre>
    </figure>
    <p>The API is designed to use UTF-8.</p>