<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 ? 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.
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
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 Cruz, Scotts Valley, Watsonville and Unincorporated Areas.
PS It was also originally recommended for scripts.
<dd> "I'm bored!"</dd>
<dd> "Me too!"</dd>