CODEWITHSUNDEEP
html
LazerSharks
LazerSharks

Reputation: 3155

What is the correct way to combine a definition list with an ordered list?

I want to make an ordered definition list. Should I nest an <ol> in a <dl>, or the other way around?

i.e.

<h4>Bike Descriptions</h4>
<dl>
    <ol>
        <li>
            <dt>Giant Bikes</dt>
            <dd>Bikes that are very sturdy and reliable.</dd>
        </li>
        <li>
            <dt>Walmart Bikes</dt>
            <dd>Bikes that are crummy and heavy.</dd>
        </li>
    </ol>
</dl>

Or nest the <dl> within <ol> or even within each <li>?

The docs don't seem to say.

Upvotes: 8

Views: 2926

Answers (5)

Danziger
Danziger

Reputation: 21161

According to the HTML spec, a <dl> already accounts for ordering being important to some extend:

The order of the list of groups, and of the names and values within each group, may be significant.

Also, from your example I don't thing order is the most important thing (i.e. it's not a step by step guide or anything like that).

In any case, if you think it is, I would suggest you use a regular <ol> and the <dfn> tag:

The <dfn> HTML element is used to indicate the term being defined within the context of a definition phrase or sentence. The <p> element, the <dt>/<dd> pairing, or the <section> element which is the nearest ancestor of the <dfn> is considered to be the definition of the term.

According to this, I think the best way to represent an ordered list of definitions is like so:

dfn {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  font-style: normal;
}
<h4>Bike Descriptions</h4>

<ol>
  <li>
    <p>
      <dfn>Giant Bikes</dfn>
      Bikes that are very sturdy and reliable.
     </p>
  </li>
  
  <li>
    <p>
      <dfn>Walmart Bikes</dfn>
      Bikes that are crummy and heavy.
    </p>
  </li>
</ol>

Upvotes: 0

Campanita
Campanita

Reputation: 61

HTML doesn't have a way to markup an ordered definition list. I would suggest using a regular <li>, and the term defined marked with a <dfn> tag:

<ul>
  <li><dfn>Giant Bike</dfn> Bikes that are very sturdy and reliable.</li>
  <li><dfn>Walmart Bikes</dfn> Bikes that are crummy and heavy.</li>
</ul>

Upvotes: 0

ma11hew28
ma11hew28

Reputation: 126407

I don't think HTML has an element for an ordered definition list.

You might consider just using a dl element and then ordering its name-value groups how you'd like. (For example, the words in a dictionary typically aren't numbered and are just alphabetically ordered.)

If you really think you must number each name-value group of a dl element, then I think I'd likely disagree with you and beg you to reconsider, since I can't think of any examples where I'd consider doing so to be good style. If you can, feel free to share. But I tend to like to keep it simple, stupid (KISS); I think less is often more; and probably you aren't gonna need it (YAGNI). However, if (even after reconsidering) you still want to do it, then you might consider using CSS counters.

According to WHATWG: HTML Standard: The dl element:

The order of the list of groups, and of the names and values within each group, may be significant.

In order to annotate groups with microdata attributes, or other global attributes that apply to whole groups, or just for styling purposes, each group in a dl element can be wrapped in a div element. This does not change the semantics of the dl element.

Upvotes: 0

Rory O&#39;Kane
Rory O&#39;Kane

Reputation: 30398

According to that documentation, the only elements a <dl> may contain are <dt> and <dd>:

Content model:

Zero or more groups each consisting of one or more dt elements followed by one or more dd elements, optionally intermixed with script-supporting elements.

Thus, your example code is invalid HTML. The only valid way to nest dl and ol/ul is in the order ol/ul > li > dl > dt+dd:

<h4>Bike Descriptions</h4>    
<ol>
    <li>
        <dl>
            <dt>Giant Bikes</dt>
            <dd>Bikes that are very sturdy and reliable.</dd>
        </dl>
    </li>
    <li>
        <dl>
            <dt>Walmart Bikes</dt>
            <dd>Bikes that are crummy and heavy.</dd>
        </dl>
    </li>
</ol>

Upvotes: 6

iMarkDesigns
iMarkDesigns

Reputation: 1262

Your example is not a valid HTML tag. Perhaps you would like to do something like this.

<h4>Bike Descriptions</h4>    
<ul>
  <li>
    <dl>
      <dt>Giant Bikes</dt>
      <dd>Bikes that are very sturdy and reliable.</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>Walmart Bikes</dt>
      <dd>Bikes that are crummy and heavy.</dd>
    </dl>
  </li>
</ul>

Then you can add style to your CSS to fix the layout.

Upvotes: 2

Related Questions