Definition List usage
Example 4: Contact information using a definition list
This example uses a defintion list to mark up pairs of related items. The pairs themselves are a logically related list. Since browsers lack wide support for CSS styling on definition list elements, span elements have been included in the markup for styling purposes only, and are not required:
<dl> <dt><span>name:</span></dt><dd><span>John Doe</span></dd> <dt><span>tel:</span></dt><dd><span>01-2345678</span></dd> <dt><span>fax:</span></dt><dd><span>02-3456789</span></dd> <dt><span>email:</span></dt><dd><span>johndoe@someemail.com</span></dd> </dl>
The following CSS styling can be used to format each paired item in the list on its own line, as well as giving a table-like layout:
dt, dd{float: left;margin: 0;padding: 0;} dt{clear:both;font-weight: bold} dt span{display: inline-block; width: 70px;} dd span{display: inline-block; margin-right: 5px;}