Lo primero que hay que dejar claro es que una lista de definición, no es una lista de elementos, a diferencia de ul y ol. Una lista de definición, como su nombre intuye, es una lista de términos con su correspondiente definición. Por tanto, no se debe de utilizar cuando tratamos de ofrecer un conjunto de elementos enumerados.

Una lista de definición utiliza tres tags <dl> </dl> que alberga el contenido de la lista; <dt> que define la apertura del término que se va a definir y <dd> que define la apertura de la definición del término anterior.

Así pues, la estructura básica de una lista de definición sería:

<dl>
  <dt>Término</dt>
  <dd>Definición del término</dd>
</dl&gt

Tomemos como ejemplo algunos términos de este glosario:

<div class="exampleDL">
  <dl>
    <dt>Accesibilidad</dt>
    <dd>Término usado para describir la facilidad con que una página web puede ser accesada por cualquier persona.</dd>

    <dt>Byte</dt>
    <dd>Es una unidad de medida. Un byte equivale a un caracter simple. Un byte de información equivale a 8 bits.</dd>

    <dt>Cookie</dt>
    <dd>Fichero que se envía a un navegador por medio de un servidor web, para registrar las actividades que realizan usuarios en un sitio.</dd>

    <dt>DHTML</dt>
    <dd>(Dinamic HTML) Es la combinación de HTML con lenguajes para crear páginas web animadas.</dd>
  </dl>
</div>

Que tendría una apariencia más o menos así:

Listas de Definición: Sin estilos

Podemos utilizar CSS para mejorar el aspecto:

.exampleDL{
  font-size:11px;
  font-family:"Century Gothic", Arial, sans-serif;
  width:350px;
}
.exampleDL dl dt{
  border-bottom:solid #000000 1px;
  padding-left:15px;
  background:url(img/bullet.gif) no-repeat center left;
  font-weight:bold;
  padding-bottom:1px;
  font-size:14px;
}
.exampleDL dl dd{
  padding:10px 10px 20px 0;
  text-align:justify;
}

Y obtendríamos algo como:

Listas de Definición: Estilo 1

O con este otro CSS:

.exampleDL{
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:12px;
	color:#FFFFFF;
	font-weight:bold;
	width:300px;
}
.exampleDL dl dt{
	background-color:#99CC33;
	padding:2px 0 2px 5px;
}
.exampleDL dl dd{
	color:#666666;
	font-weight:normal;
	text-align:justify;
	font-size:11px;
	padding:8px 8px 15px 50px;
	background-color:#F4F4F4;
	margin-left:0;
}

Obtenemos esta otra apariencia:

Listas de Definición: Estilo 2