Oktav Oktav - 27 days ago 8
AngularJS Question

Group `dt` and `dd` in `span` under `dl`

I'm trying to show or hide certain

dt
/
dd
groups within a
dl
. Is this valid HTML? Should browsers complain about this or is it legit? I've looked at the
dl
specs but couldn't find anything saying that the
dl
can contain something other than
dt
and
dd
children. I need to do this as I'm using
angularJS
which provides this neat way of adding or removing elements from the
DOM


<dl>
<dt>Term</dt>
<dd>Definition</dd>

<span ng-if="true">
<dt>Term 2</dt>
<dd>Definition 2</dd>
</span>
</dl>

Answer

This is not valid HTML5, because 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.

So dl can't contain span, but most browsers will render it correctly.

Instead of span, I suggest using di elements. They are invalid HTML5 too, but were valid in XHTML2.

<dl>
  <dt>Term</dt>
  <dd>Definition</dd>
  <di ng-if="true">
    <dt>Term 2</dt>
    <dd>Definition 2</dd>
  </di>
</dl>

However, the downside is that old IE won't recognize di, so it won't apply CSS styles to them unless you use document.createElement('di') while the document is loading.