3

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?

2
  • re-reading this i may have misunderstood the question, are you asking for what to use for the entire book, or what to use for the book details?
    – zzzzBov
    Commented Sep 15, 2016 at 20:28
  • I'm asking which tag to use for each of the lines of book details.
    – Eric
    Commented Sep 15, 2016 at 20:48

2 Answers 2

5

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

1
  • In skimming all the MDN descriptions for tags, I failed to read this to the point where it said metadata, which is clearly what's being marked up. I'm accepting this answer.
    – Eric
    Commented Sep 19, 2016 at 15:27
2

The dl element can be used for this purpose. The spec defines that it represents "an association list" (or "description list") that consists of "name-value groups".

Your case is similar to the third example in the HTML5 spec, as your content is also metadata:

The following example illustrates the use of the dl element to mark up metadata of sorts. At the end of the example, one group has two metadata labels ("Authors" and "Editors") and two values ("Robert Rothman" and "Daniel Jackson").

<dl>
 <dt> Last modified time </dt>
 <dd> 2004-12-23T23:33Z </dd>
 <dt> Recommended update interval </dt>
 <dd> 60s </dd>
 <dt> Authors </dt>
 <dt> Editors </dt>
 <dd> Robert Rothman </dd>
 <dd> Daniel Jackson </dd>
</dl>

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.