0

Here's the scenario:

The scenario

If it was all text then I would use all dl tags. However, there are some input, checkboxes, dropdown list. Is it semantics to use dt and dd? If not, what tag is the most appropriate?

Thank you

Long Nguyen
  • 153
  • 2
  • 3
  • 10
  • I think, a simple `` without `
    ` is semantically appropriate.
     – Sebastian Simon Jul 15 '15 at 01:20
  • You could argue the case either way for semantics here. At least, as @Oriol points out, it is valid HTML. For me, I think it is close enough semantically. Semantics are more of a guide line than a rule. I would say semantically you have more of a list than a table. – Jon P Jul 15 '15 at 01:40

2 Answers2

2

The content model of dl elements is

Zero or more groups each consisting of one or more dt elements followed by one or more dd elements, optionally intermixed with script-supporting elements.

The content model of dt elements is

Flow content, but with no header, footer, sectioning content, or heading content descendants.

The content model of dd elements is

Flow content.

Flow content includes input and select elements (among others).

So yes, it's allowed.

Oriol
  • 274,082
  • 63
  • 437
  • 513
  • Just because it is valid, doesn't make it semantic. I'm on the fence with the semantics with this one. – Jon P Jul 15 '15 at 01:34
  • So if there is an input inside the
    , do I have to have a label with it for accessible purpose? Doesn't feel semantic to me though.
     – Long Nguyen Jul 15 '15 at 01:40
  • 2
    I don't want to hijack @Oriol here, but yes you should have a label, and technically for *every* input, which will make "Override Current Policy" interesting. However, the `label` can go in the `dt`, the `for` attribute will associate it with the appropriate input. – Jon P Jul 15 '15 at 01:49
  • 1
    @LongNguyen I think the `label` would be a good idea to make more explicit the relationship between the text in the `dt` and the `input` in the `dd`. However, it's not completely necessary, because `dl` already associates them. – Oriol Jul 15 '15 at 15:02
0

With semantics there can be a lot of grey areas and often it can come down to interpretation. Strictly speaking you don't have a list of definitions, but it could be interpreted that way.

One option you can look at is a straight list:

<ul class="meaninfulClassNameHere">
   <li>
      <span class="label">Blah</span><span class="value">Blah<span>
   </li>
   <li>
      <label for="someInputID" class="label">A Label</label>
      <span class="value">
           <select id="someInputID></select>
   </li>
</ul>

It may also be more flexible than a dl

UPDATE

However having just read: http://html5doctor.com/the-dl-element/, in HTML5 dl is a Description List. It quotes the W3C spec:

The dl element represents an association list consisting of zero or more name-value groups (a description list). A name-value group consists of one or more names (dt elements) followed by one or more values (dd elements), ignoring any nodes other than dt and dd elements. Within a single dl element, there should not be more than one dt element for each name.

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

And what you have is effectively Name/Value pairs, even though some of the data it represented in an input.

Just remember you can also put a label in a dt

Jon P
  • 19,442
  • 8
  • 49
  • 72
  • Down voter care to comment on how I can improve the answer or comment on their issue with it? – Jon P Jul 27 '15 at 23:54