Label Label Semantics

Question

I read this one and I am GENERAL using spacing or strengths to describe “text labels”. Is this true for best practices? This seems to be also a semantic path, but why is it limited only to form elements?

What if I want to display the information as follows:

Name: FOo Bar Age: 27 Weight: 151 kg 

etc.?

name, age and weight can be described as labels, but since the elements they describe are not input tags, they are not semantically correct (at least for html and w3c). I usually use

 <span class="label"> or <span class="description"> or <span class="person-detail"> etc 

but, as a rule, there should also be a tag for labels that do not belong to input fields. Since this might be a bit subjective, I don't mind turning into a wiki community or something like that

Answer 1

You should use "nofollow"> ( 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 specification states that it can be used to

terms and definitions, topics and meanings of metadata, questions and answers, or any other data group named.

---

I think you can use table (with th ). But I would use it only when I want to compare several people, and not just list the data of one person.

Answer 2

I would avoid using the label tag unless it matches the HTML functional form (with editable fields); otherwise, using it can be semantically confusing.

A span tag has no semantic meaning, regardless of which identifier or class is added to it, and regardless of the context in which it was used. You do not get anything semantically using span (although this does no harm).

A strong has a general meaning (this content has special meaning), which does not depend on the context in which it was used. This is sometimes useful when there is nothing more suitable.

In this particular case, the list of definitions (as suggested by @unor) seems to be what it is. If an advanced style is required, put each value-name pair in a separate definition list (which may be inconvenient semantically, but this allows for more flexibility when styling content).

Answer 3

I assume that if you want to be 100% semantically correct, you will have to use shortcuts in combination with disabled or read-only text fields that have been styled to look a little different.