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

Question

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.

Answer 1

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>

Answer 2

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.