在价格细目或结账时的商品列表中使用 <dl>、<dt>、<dd> 进行语义化使用

Question

使用

<dl>

、

<dt>

、

<dd>

标签是否正确（在语义 HTML 意义上）：

1. 在结账页面显示价格明细？就像显示小计、税金和总计的那些。
2. 显示订单的商品列表，当商品有对其所含内容或组成的简短说明时。例如，在汉堡结帐页面中，如果客户自定义了他/她的订单以添加一些额外的成分或类似的东西。

我在思考如何标记这个设计时遇到了这个。

通过阅读spec，在我看来它就像在建议中一样，但是，也许我在这里扭曲了一些语义？

我想听听您对这方面规范的理解。

Answer 1

使用描述列表

<dl>

来标记小计、税额和总价是正确的。但是，由于前两项加起来等于总价格，因此该内容本质上更加表格化，而不仅仅是一组相关术语和描述。因此，我认为

<table>

更合适。

您还可以使用

<tfoot>

将最后一行封装为总计：

这通常是列的摘要，例如，列中给定数字的总和。

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>