HTML: Best tag for ‘labels’ outside of forms

Question

A definition list could be suitable here:

<dl>
    <dt>Name</dt>
    <dd>John</dd>
    <dt>Age</dt>
    <dd>40</dd>
    <dt>City</dt>
    <dd>Frankfurt</dd>
    <dt>Country</dt>
    <dd>Germany</dd>
    <dt>Status</dt>
    <dd>Active</dd>
</dl>

http://www.w3.org/TR/html401/struct/lists.html#h-10.3 – Definition lists, created using the DL element, generally consist of a series of term/definition pairs (although definition lists may have other applications).

However, just because you want bold formatting doesn’t mean you are restricted to <strong> or <b>. You can use the non-semantic <span> and simply apply the formatting with CSS.

In addition, you can use CSS to add the colons, rather than putting them in your markup:

dt:after { content:":"; }

Perhaps to help clear up some confusion about it’s proper usage, it looks like HTML5 will be referring to this tag as a description list.

http://www.w3.org/TR/html5/grouping-content.html#the-dl-element – The dl element represents an association list consisting of zero or more name-value groups (a description list).

Leave a Comment Cancel reply