Question 213962 in Html Question posted in
Some basic documentation can be found here.

Can I add multiple div elements within a description list element in HTML?

Is it possible to nest multiple elements inside a in HTML to make it valid and accessible? If so, what would be the correct syntax or alternative to achieve this?

<dl class="list">
 <div class="column">
   <div class="item">
     <dt>Some content...</dt>
     <dd>Some content..</dt>
   </div>
   <div class="item">
     <dt>Some content...</dt>
     <dd>Some content..</dt>
     <dt>Some content...</dt>
     <dd>Some content..</dt>
   </div>
 </div>
</dl>

I know that using a single <div> inside the <dl> is valid, but project requirements involve grouping the data, and it would be more convenient for styling purposes if I could use multiple elements within the <dl>. I expect the code to be valid and accessible.

Tags:

2

Answers


  1. 0

    The only valid direct children of a <dl> are either <dt> or <dd> elements (and both are required in that order to make a fully valid description list).

    You can find this under the "content model" section of the HTML spec:

    Content model:
    Zero or more groups each consisting of one or more dt elements followed by one or more dd elements.
    Source: HTML spec for dl element

    Unfortunately you will need to rework your CSS to conform with this pattern, but, as you stated, it is possible to add <div>s within the <dt> and <dt> elements, so that does give some flexibility.

    I have a complex layout, I cannot use <dl>

    Your other option is to use a traditional <ul> and utilise headings and paragraphs to achieve a similar result that is still accessible.

    Although you lose a little bit of semantic information that a <dl> provides, it does still provide enough information and the required relationships between items.

    <ul class="list">
 <li class="column">
   <div class="item">
     <h3>Some content...</h3>
     <p>Some content..</p>
   </div>
   <div class="item">
     <h3>Some content...</h3>
     <p>Some content..</p>
     <h3>Some content...</h3>
     <p>Some content..</p>
   </div>
 </li>
 <li class="column">
   <div class="item">
     <h3>Some content...</h3>
     <p>Some content..</p>
   </div>
   <div class="item">
     <h3>Some content...</h3>
     <p>Some content..</p>
     <h3>Some content...</h3>
     <p>Some content..</p>
   </div>
 </li>
</ul>

    important note: the <h3> should be appropriate for your page so you do not skip heading levels.

    additional note: Be careful with what positioning you use on the <li class="column"> as this can cause issues in Safari (and possibly other browsers) where it is no longer presented as a list item. If this happens you can add some aria attributes to correct it.

    final note: last thing to note is that using <li> as columns is probably not ideal, but I was matching your pattern. Make sure to check that it is a logical structure with your actual content, it could be that just <div>s are a better choice, depending on whether each <li> "section" are related items to be grouped etc.

    Another option that may work?

    As you can see from the caveats, you need to really consider relationships between items vs visual design. If your need for divs is purely for aesthetics, then it may be better to just use <h3> and <p> elements within a <section> element, like as follows:

    <section class="list" aria-labelledby="section-heading">
  <h2 id="section-heading">FAQs</h2>
  <div class="column">
    <div class="item">
      <h3>Some content...</h3>
      <p>Some content..</p>
    </div>
    <div class="item">
      <h3>Some content...</h3>
      <p>Some content..</p>
      <h3>Some content...</h3>
      <p>Some content..</p>
    </div>
  </div>
  <div class="column">
    <div class="item">
      <h3>Some content...</h3>
      <p>Some content..</p>
    </div>
    <div class="item">
      <h3>Some content...</h3>
      <p>Some content..</p>
      <h3>Some content...</h3>
      <p>Some content..</p>
    </div>
 </div>
</section>

    Note the section heading and linking it with aria-labelledby!

    Obviously you can then visually style the headings and paragraphs to look like a description list if you wish with CSS.

    Login or Signup to reply.
  2. 0

    According to the WHATWG HTML Standard for The dl element, a name-value group consists of one or more dt elements followed by one or more dd elements. Each name-value group in a dl element can be wrapped in a div element. However, this does not allow for multiple name-value groups to be wrapped in a single div element, nor for multiple div elements to be nested within a dl element.

    If you know how many name-value groups will be in each section, you could create sections by using pseudo-classes. However, this requires more markup and will be a chore to update when name-value groups are added or removed.

    I think it would be best to use individual lists with separate dl elements rather than sectioning groups.

    dl.list1,
dl.list2,
dl.list3 {
  padding: 1em;
  border: 1px solid;
}

dl.list1 {
  margin-block-end: 0;
  background-color: deepskyblue;
}

dl.list2 {
  margin-block: 0;
  background-color: lightskyblue;
}

dl.list3 {
  margin-block-start: 0;
  background-color: dodgerblue;
}




dl.list4 > div {
  padding-inline: 1em;
  border-inline: 1px solid;
}

dl.list4 > div:first-child,
dl.list4 > div:nth-child(3),
dl.list4 > div:nth-child(6) {
  padding-block-start: 1em;
  border-block-start: 1px solid;
}

dl.list4 > div:last-child,
dl.list4 > div:nth-child(2),
dl.list4 > div:nth-child(5) {
  padding-block-end: 1em;
  border-block-end: 1px solid;
}

dl.list4 > div:nth-child(-n+2) {
  background-color: deepskyblue;
}

dl.list4 > div:nth-child(n+3):nth-child(-n+5) {
  background-color: lightskyblue;
}

dl.list4 > div:nth-child(6) {
  background-color: dodgerblue;
}
    <dl class="list1">
  <dt>Some description term...</dt>
  <dd>Some description details..</dd>
  <dt>Some description term...</dt>
  <dd>Some description details..</dd>
</dl>

<dl class="list2">
  <dt>Some description term...</dt>
  <dd>Some description details..</dd>
  <dt>Some description term...</dt>
  <dd>Some description details..</dd>
  <dt>Some description term...</dt>
  <dd>Some description details..</dd>
</dl>

<dl class="list3">
  <dt>Some description term...</dt>
  <dd>Some description details..</dd>
</dl>

<hr>

<dl class="list4">
  <div>
    <dt>Some description term...</dt>
    <dd>Some description details..</dd>
  </div>
  <div>
    <dt>Some description term...</dt>
    <dd>Some description details..</dd>
  </div>
  <div>
    <dt>Some description term...</dt>
    <dd>Some description details..</dd>
  </div>
  <div>
    <dt>Some description term...</dt>
    <dd>Some description details..</dd>
  </div>
  <div>
    <dt>Some description term...</dt>
    <dd>Some description details..</dd>
  </div>
  <div>
    <dt>Some description term...</dt>
    <dd>Some description details..</dd>
  </div>
</dl>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search