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


<dd>Black hot drink</dd>
<dd>White cold drink</dd>

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?


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.

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.

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

PS It was also originally recommended for scripts.

<dd> "I'm bored!"</dd>
<dd> "Me too!"</dd>
1 Like