Semantically Marking Up People Directory Labels

[Mark Root-Wiley]

I trust that you CSS-Tricks faithful will have some thoughts on this one. I didn’t see anything in the forum on this topic:

I’m building a people directory in WordPress (custom post type, custom fields, etc.)

The eventual front end display ends up looking like:
John Doe
Position: Chief Liberal Artist
Email: [email protected]
Education: MFA, Hogwarts

My question is how I should markup the labels (e.g. “Position”). I’ve never found a satisfying way nor a conversation online (stack exchange, quora, etc.) that seems definitive.

Options include:

• span class=”label” (boring, old, the actual element isn’t semantic)
• dl/dt/dd (doesn’t feel right, but you should tell me if I’m wrong)
• label (except the spec seems pretty clear that I shouldn’t use it)
• mysterious, unlisted, holy grail answer that you should suggest

I want to use the label element because when entering the data, that element labeled the field that is now being displayed as text, but like I say above, I don’t think that’ll fly.

Some relevant specification stuff:

The HTML4 spec for label says:
“The LABEL element is used to specify labels for controls that do not have implicit labels,”

The HTML5 spec for label says:
“The label represents a caption in a user interface.”

The HTML 4 spec for dl says:
“Definition lists, created using the DL element, generally consist of a series of term/definition pairs (although definition lists may have other applications).” (That parenthetical part sure is vague!)

The HTML5 spec for dl says:
“The dl element represents a description list, which consists of zero or more term-description (name-value) groupings; each grouping associates one or more terms/names (the contents of dt elements) with one or more descriptions/values (the contents of dd elements).”

(As an aside: No matter what I do, I’ll be marking up the result with the person scheme from schema.org.)

[TheDoc]

Personally, I would use the definition list. The description provided by W3 is perfectly ambiguous: http://www.w3.org/wiki/HTML_lists

“HTML5 has changed the definition of this type of list to the more general “description list” because designers and developers were all too often using description lists to mark up name/value groups that weren’t items and descriptions.”

[wolfcry911]

I agree with TheDoc, definition list

[Mark Root-Wiley]

@TheDoc, thanks for pointing that section out, I had missed it.

I think the one thing that gives me pause is still the fact that there’s a difference between a “term” and a “label.”

[Author]

Posts