Search code examples
htmlaccordionsemantic-markup

Semantic Markup: Combining Description List and Details/Summary Tag for Accordion

Often accordions are used for FAQ sections. So description list tags dl, dt and dd seem to be the perfekt markup.

For expandable content detail and summary tags seem to be a good fit.

Unfortunately, the dl tag must be followed by a dt or dd tag. This makes a combination with detail and summary tags impossible:

<dl class=accordion>
    <details>
        <dt>
            <summary>
                <h2>Lorem ipsum dolor sit amet</h2>
            </summary>
        </dt>
        <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
    </details>
</dl>

The accordion looks like this and can be expanded by clicking the title or ✚ icon.

✚ Lorem ipsum dolor sit amet

The HTML validator says:

Element details not allowed as child of element dl in this context.

Any ideas how to semantically correct combine description list and details/summary tags for accordions?

Solution

  • Description lists and details/summary elements cannot be validly combined in the way you describe.

    If you're marking up a FAQ section, a description list doesn't seem appropriate. Description lists are meant to be comprised of terms and their descriptions. A question is not really a "term".

    The <details> and <summary> elements are more appropriate for FAQs, and can be easily combined with an unordered list. This would be the more semantic approach:

    <h1><abbr title="Frequently Asked Questions">FAQs</abbr></h1>
<ul>
  <li>
    <details>
      <summary>Lorem ipsum dolor sit amet?</summary>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </details>
  </li>
  <li>
    <details>
      <summary>Lorem ipsum dolor sit amet?</summary>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </details>
  </li>
  <li>
    <details>
      <summary>Lorem ipsum dolor sit amet?</summary>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </details>
  </li>
</ul>