HTML: Best tag for 'labels' outside of forms

Solution 1:

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).

Solution 2:

This is the right place for a DL structure:

<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>

Note that you'll need to add styling in order to make it look like that, but this is the right logical structure.

Solution 3:

Maybe you can use a definition list (dl, dt, dd), but that doesn't sound correct either.

As W3C says that it represents a caption for a form control, the text next to the label isn't a control, and so the for attribute becomes pointless.

I would just go with strong, also because it's the best representation without CSS.

Edit:

Since this about people, you can also use the vCard equivalent for HTML: hCard. Example:

<div class="vcard">
    <div class="fn">
        <strong class="type">Name</strong>:
        <span class="value">John</span>
    </div>
    <div class="note">
        <strong class="type">Age</strong>:
        <span class="value">40</span>
    </div>
    <div class="adr">
        <div class="locality">
            <strong class="type">City</strong>:
            <span class="value">Frankfurt</span>
        </div>
        <div class="country-name">
            <strong class="type">Country</strong>:
            <span class="value">Germany</span>
        </div>
    </div>
    <div class="note">
        <strong class="type">Status</strong>:
        <span class="value">Active</span>
    </div>
</div>

You can then use as many of these in an <ul> or <ol>. Some browsers will recognize these properties and turn them into links for use with an application. For example the adr properties could link to a mapping tool.

This is just a standard, it's not meant to be semantically correct. As far as I know you can use whatever markup (HTML tags) you like within these hCards. See link for the details.

Solution 4:

I agree with the other answers that a <dl> list is the most semantic option here. In the past I was never sure if this was a correct use of <dl> because all the official descriptions of the <dl> element I saw described it as a "definition list" to be used for actually defining terms as in a glossary (see my comments on @Cristian's answer). However, after looking at the latest editor's draft of the HTML 5 spec, I noticed that it has been renamed to "description list" rather than "definition list", and the example given is actually very similar to the example in the question here.

<dfn>, on the other hand, seems to be intended only for actually defining terms. Here are some relevant quotes from the above link:

The dt element itself, when used in a dl element, does not indicate that its contents are a term being defined, but this can be indicated using the dfn element.

...

The dfn element represents the defining instance of a term. The paragraph, description list group, or section that is the nearest ancestor of the dfn element must also contain the definition(s) for the term given by the dfn element.

So in conclusion I would second the recommendation for the use of the <dl> element, even though its default styling is different from the OP's example.

Here's a reusable CSS class for a <dl> in the style of the example:

.dl-inline dt, .dl-inline dd {display:inline; margin:0;}
.dl-inline dt:after {content:': '}
.dl-inline dd + dt:before {content:''; display:block;}

<dl class="dl-inline">
	<dt>Name</dt>
	<dd>John</dd>
	<dt>Age</dt>
	<dd>40</dd>
	<!-- ... -->
</dl>

Or the SASS version:

.dl-inline {
    dt,dd {display:inline; margin:0;}
    dt:after {content:': '}
    dd + dt:before {content:''; display:block;}
}