January 30, 2024 by admin

HTML/CSS Reference for DMET 155/355

Description Lists

Description lists are quite often forgotten. This is maybe because they are much more specific than ordered and unordered lists and therefore less useful, generally, but where there is a list of terms and descriptions (such as a glossary), a description list is your go-to-element.

dl gets the ball rolling, similar to the ul and ol elements, establishing the list. Rather than containing li elements, though, description lists have dt elements, which are the terms, followed by dd elements, which are the descriptions associated to the dt elements.

There doesn’t have to be one dt followed by one dd, there can be any number of either. For example, if there are a number of words that have the same meaning, there might be a number of dt’s followed by one dd. If you have one word that means various different things, there might be one dt followed by several dd’s.

See the Pen Glossary by Nicholas D’Angelo (@ndangelo) on CodePen.

<h1>Some random glossary thing</h1>
<dl>
    <dt>HTML</dt>
    <dd>Abbreviation for HyperText Markup Language - a language used to make web pages.</dd>

    <dt>Dog</dt>
    <dd>Any carnivorous animal belonging to the family Canidae.</dd>
    <dd>The domesticated sub-species of the family Canidae, Canis lupus familiaris.</dd>

    <dt>juice</dt>
    <dt>beer</dt>
    <dt>Milk</dt>
    <dd>A white liquid produced by cows and used for human consumption.</dd>
</dl>

Note that the img element doesn’t need an alt attribute IF the figcaption (that’s “figure caption”, in case you need it spelling out) does that job.

1. Add Images to each definition. Take a look at the “figure” tag example.
2. Included the following in a wrapper.
3. Use a unique style in CSS. The codepen example is simple CSS. Have fun with this! add rounded corners, drop shadows etc…
4. Include 10 terms and definitions.

<figure>
    <img src="obelisk.jpg">
    <figcaption>Tixall Obelisk</figcaption>
</figure>

See the Pen figure and caption by Nicholas D’Angelo (@ndangelo) on CodePen.