htmlsemantic-markup

Semantic use of <dl>, <dt>, <dd> for a price breakdown, or on list of items in a checkout


Is correct (in the sense of semantic HTML) to use the <dl>, <dt>, <dd> tags to:

  1. Show a price breakdown in a checkout page? Like the ones which show Subtotal, Taxes and Total.
  2. To show the list of items for an order when the items have like a brief explanation of what they contain or what are they made of. For example, in a burguer checkout page if the customer has customised his/her order to add some extra ingredients or something like that.

I came across this while thinking how to mark up this design.

By reading the spec, it looks to me like it is inside the recommendations but, maybe I'm twisting a bit the semantics here?

I'd like to hear your understanding of the spec in this regard.


Solution

  • It wouldn't be incorrect to use a description list <dl> to mark up a subtotal, tax amount, and total price. However, because the first two add up to the total price, this content is more tabular in nature than just a group of related terms and descriptions. As such, a <table> would be more appropriate in my opinion.

    You could additionally use a <tfoot> to encapsulate the last row with the total. A <tfoot> element—

    ...is usually a summary of the columns, e.g., a sum of the given numbers in a column.

    table { min-width: 12em; }
    th { text-align: left;  }
    td { text-align: right; }
    tbody th { font-weight: normal; }
    tfoot td { font-weight: bold;   }
    <table>
      <tbody>
        <tr>
          <th scope="row">Subtotal</th>
          <td>$200.00</td>
        </tr>
        <tr>
          <th scope="row">Taxes</th>
          <td>$40.00</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th scope="row">Total</th>
          <td>$240.00</td>
        </tr>
      </tfoot>
    </table>