Where is useful or better than ul the dl dd dt tags

Like

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

Where is useful to use it more than ul tag? Any practive to usage? Or why is good to use?

Or what write with this on a website what list?

With this can write an open close hours list? Like Sunday Closed etc :smiley: ? Or at what purpose good to use it on a general website?

Thanks!

Semantically the two are not really interchangeable. Other than being lists.

4.4.8 The dl element

The dl element represents an association list consisting of zero or more name-value groups (a description list). A name-value group consists of one or more names (dt elements) followed by one or more values (dd elements), ignoring any nodes other than dt and dd elements. Within a single dl element, there should not be more than one dt element for each name.

Looking at the spec for more usage examples might help give a better understanding of the element(s).

For normal websites, I’m not really sure how useful they are, but I can imagine for more document heavy sites they might be.

I guess you can use it for Opening hours. It seems a bit unnecessary, but I don’t think it would be semantically incorrect.

<dl>
  <dt>Open:</dt>
  <dd>Monday</dd>
  <dd>Tuesday</dd>
  <dd>Wednesday</dd>
  <dd>Thursday</dd>
  <dd>Friday</dd>
  <dt>Closed:</dt>
  <dd>Saturday</dd>
  <dd>Sunday</dd>
</dl>
1 Like

What @lasjorg said but unless you have something that fits exactly the use case (for example a glossary), it’s somewhat difficult to use and style. Very often, when seems like a good idea to use it, it isn’t. For your example, why not just two lists, each with a h1/h2/whatever tag above them?

I just try to use all elements as possible. This list type never saw about websites in real use so not many things got in my head to use it for.

@bestdesign I prefer it for anything that I structure like a list where the list item has two parts, not necessarily semantic HTML. Semantic would be like a glossary page, dictionary entry, phonebook entry ( name and number ). Not semantic would be to make a vertical form to keep the label on top of the text input, unless you argue it’s a list of form labels and elements. Some consider it a gray area.
@lasjorg Good one. I once did a service area list by county in html 4.01 and css 2.1, but I had white-space breaking problems which I had to brute force with nbsp and br instead of css because of the sidebar width.

<dl>
<dt>
<span class="county">SANTA CRUZ COUNTY</span>  - Local Phone Numbers: 831-469-4476, 831-336-2118
 		</dt>
 		<dd>
 			Capitola, Santa&nbsp;Cruz, Scotts&nbsp;Valley, Watsonville and Unincorporated&nbsp;Areas.
 		</dd>
	 <br>
.
.
.
</dl>

PS It was also originally recommended for scripts.

<dl>
<dt>Sam</dt>
<dd> "I'm bored!"</dd>
<dt>Bob</dt>
<dd> "Me too!"</dd>
</dl>
1 Like