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

user_3770408 0
Viewed 295

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?

accordion semantic-markup html
1 Answers

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>

user_53517210
Related