Is correct (in the sense of semantic HTML) to use the <dl>
, <dt>
, <dd>
tags to:
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.
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>