Search code examples
htmlsemantic-markup

Is there a semantic html tag for short, descriptive fragments of text?


Let's say I'm writing markup to describe a book with a few lines of details, for example:

A Tale of Two Cities

  • Author: Charles Dickens
  • Year published: 1859
  • Genre: Historical Fiction
  • Average Review: 3.8/5

Here's the catch: Even though I've formatted it as a list in the example, it's not semantically a list. Also, many of these fields will be user-configurable, so the markup to books, authorship, and time don't really apply. Do I use <p>, <li>, <dl>, <div> or something else for each of these lines? If I don't fall back to <div>, the <p> tag seems the closest to what I want, even though it's not a complete paragraph of text.

What's the right tag for these non-list, not-quite-paragraph items whose keys and values I won't know until runtime?


Solution

  • Perhaps you could consider the description list: <dl>

    The HTML element (or HTML Description List Element) encloses a list of pairs of terms and descriptions. Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).

    <dl>
      <dt>Firefox</dt>
      <dd>A free, open source, cross-platform, graphical web browser
      developed by the Mozilla Corporation and hundreds of volunteers.</dd>
      <dd>The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox,
      is a mostly herbivorous mammal, slightly larger than a domestic cat
      (60 cm long).</dd>
    
    <!-- other terms and definitions -->
    </dl>
    

    More information available here