Latest Lists

Definition list?

What is a definition list, what is a defined term, and how do you use them in frontpage?

Public Comments

1. From the W3C: "Definition lists...consist of two parts: a term and a description. The term is given by the DT element and is restricted to inline content. The description is given with a DD element that contains block-level content." Traditionally, definition lists have been used for marking up a glossary: <dl> <dt>What is a definition list?</dt> <dd>Definition lists...consist of two parts: a term and a description. The term is given by the DT element and is restricted to inline content. The description is given with a DD element that contains block-level content.</dd> </dl> The W3C also suggests the possibility of using dl's for marking up dialogue, with the <dt> representing the speaker and the <dd> representing what the person is saying. I happen to use dl's quite a bit. They're great for marking up blocks of text that are accompanied by an image, a technique created by Dan Cederholm: HTML: <div id="sweden"> <dl> <dt>Stockholm</dt> <dd class="img"><img src="img/gamlastan.jpg" width="80" height="80" alt="Gamla Stan" /></dd> <dd>This was taken in Gamla Stan (Old Town) in a large square of amazing buildings.</dd> </dl> <dl class="alt"> <dt>Gamla Uppsala</dt> <dd class="img"><img src="img/uppsala.jpg" width="80" height="80" alt="Gamla Uppsala" /></dd> <dd>The first three Swedish kings are buried here, under ancient burial mounds.</dd> </dl> <dl> <dt>Perpetual Sun</dt> <dd class="img"><img src="img/watch.jpg" width="80" height="80" alt="Wristwatch" /></dd> <dd>During the summer months, the sun takes forever to go down. This is a good thing.</dd> </dl> </div> CSS: #sweden { float: left; width: 304px; padding: 10px 0; background: url(img/bg.gif) no-repeat top left; } #sweden dl { float: left; width: 260px; margin: 10px 20px; padding: 0; display: inline; /* fixes IE/Win double margin bug */ } #sweden dt { float: right; width: 162px; margin: 0; padding: 0; font-size: 130%; letter-spacing: 1px; color: #627081; } #sweden dd { margin: 0 0 0 98px; padding: 0; font-size: 85%; line-height: 1.5em; color: #666; } #sweden dl dd.img { margin: 0; } #sweden dd.img img { float: left; margin: 0 8px 0 0; padding: 4px; border: 1px solid #D9E0E6; border-bottom-color: #C8CDD2; border-right-color: #C8CDD2; background: #fff; } /* reverse float */ #sweden .alt dt { float: left; } #sweden .alt dd { margin: 0 98px 0 0; } #sweden .alt dd.img img { float: right; margin: 0 0 0 8px; } Good luck.