I'm trying to show or hide certain dt/dd groups within a dl. Is this valid HTML? Should browsers plain 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>

I'm trying to show or hide certain dt/dd groups within a dl. Is this valid HTML? Should browsers plain 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>

• javascript
• html
• angularjs

3 Answers 3

Grouping with div in dl is now valid per WHATWG HTML, see https://html.spec.whatwg/multipage/semantics.html#the-dl-element

The dl element

Content model:

Either: 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.

Or: One or more div elements, optionally intermixed with script-supporting elements.

<dl>
 <div>
  <dt> Last modified time </dt>
  <dd> 2004-12-23T23:33Z </dd>
 </div>
 <div>
  <dt> Remended update interval </dt>
  <dd> 60s </dd>
 </div>
 <div>
  <dt> Authors </dt>
  <dt> Editors </dt>
  <dd> Robert Rothman </dd>
  <dd> Daniel Jackson </dd>
 </div>
</dl>

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.

That will probably work in most browsers but it is not valid HTML. It could also break some CSS. You probably need to just use 2 ng-if directives

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

Note that if you need to do something like iterate over a list of items you can use angular's ng-repeat-start and ng-repeat-end.

<dt ng-repeat-start="item in list">Term 2</dt>
<dd ng-repeat-end>Definition 2</dd>