问题
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 elements?
What if I wanted to display information as this:
Name: FOo Bar
Age: 27
Weight: 151 kg
etc?
name, age, and weight can all be described as labels, but since the items they're describing aren't input tags, it isn't semantically correct(for html and w3c at least). I usually use
<span class="label"> or <span class="description"> or <span class="person-detail"> etc
but generally there should also be a tag for labels that don't pertain to input fields. As this might be a bit subjective I don't mind this turning into a community wiki or something
回答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.
回答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).
回答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.
来源：https://stackoverflow.com/questions/5414974/label-tag-semantics