Label Tag Semantics

I've read this and I GENERALLY use spans or strongs to describe 'text-labels'. Is this true for best practices? It seems is also a semantic way but why is it limited to just form

Solution 1:

You should use a definition list (dl with dt and dd):

<dl>

 <dt>Name</dt>
 <dd>FOo Bar</dd>

 <dt>Age</dt>
 <dd>27</dd>

 <dt>Weight</dt>
 <dd>151 kg</dd>

</dl>

The spec states that it could be used for

terms and definitions, metadata topics and values, questions and answers, or any other groups of name-value data.

---

I think a table (with th) could be used, too. But I would only use it when I want to compare several people, not just listing the data of one person.

Solution 2:

I'd avoid using a label tag unless it's in combination with a functional HTML form (with editable fields); otherwise, using it may be semantically confusing.

A span tag has no semantic meaning, regardless of the id or class added to it, and regardless of the context in which it's used. You don't gain anything semantically by using a span (though it does no harm).

A strong tag has a generic meaning (this content has extra importance) that doesn't vary based on the context in which it's used. It's sometimes useful when there's nothing else more appropriate.

In this particular case, a definition list (as suggested by @unor) seems like the way to go. If advanced styling is required, put each name-value pair into a separate definition list (which may be awkward semantically, but it allows greater flexibility with styling the content).

Solution 3:

I guess if you wanted to be 100% semantically correct you'd have to use labels in conjunction with disabled or readonly text boxes that have been styled to look a bit different.