Marcado correcto de listas con HTML/XHTML

En este artículo haré un breve repaso sobre las listas en HTML y XHTML, pero sobretodo explicaré errores comunes que han de evitarse y haré hincapié en la necesidad de aplicar CSS en menús de navegación.

BREVE REPASO A LAS MARCAS O TAGS

Las listas en HTML (enlace en inglés) o XHTML pueden ser de tres tipos: numeradas, no numeradas o de definición de términos.

Las listas se marcan con <ol> (Ordered List), en el caso de listas ordenadas; <ul> (Unordered List), en el caso de listas desordenadas; o <dl> (Definition List), en el caso de listas de definición de términos.

En el caso de los dos primeros, listas ordenadas y desordenadas, cada elemento se marca con <li> (List Item), y en el caso del último, listas de definición de términos, cada elemento está formado por dos subelementos: el término, que se marca con <dt> (Definition Term); y la definición, que se marca con <dd> (Definition of Definition).

FINALIDAD DE LAS LISTAS

La finalidad del marcado de listas, es simplemente, marcar elementos con información relacionada, que formen parte de un conjunto. Es bastante obvio, pero mucha gente no lo hace bien.

El tipo de listas a utilizar, ordenadas, desordenadas o de definición, depende de cada caso. Las ordenadas se han de utilizar en listas cuyos elementos deben guardar un orden (no puede ir uno antes que otro), las desordenadas cuando no se requiera guardar un orden, y las de definición en casos donde se necesite nombrar un elemento y definirlo (valga la redundancia) .

Un caso típico de utilización de listas es en menús de navegación. Antes de nada, los menús de navegación deben marcarse con la marca <map> (enlace en inglés) ya que esta marca no solo se utiliza con mapas de imágenes sino con elementos de navegación. Por otro lado, un menú está compuesto por secciones. Estas secciones son elementos (desordenados, la mayoría de las veces ya que no se requiere un orden en la visita de un sitio web) de una lista, una lista de secciones, y debería ser marcado como lista con <ul> en la mayoría de los casos, o con <ol>. Cuando el menú se despliega horizontalmente, la gente se olvida de listas, y suele marcarlo con una tabla para colocar los elementos en el lugar deseado. Marcar como tabla un menú es un error, ya que un menú semánticamente no es una tabla de datos, es una lista. Si deseas un menú horizontal, márcalo como lista y luego situalo como quieras con CSS. En esta web sobre listas con CSS (en inglés) verás muchos ejemplos de cómo hacerlo.

Otro marcado no tan obvio de listas es en las famosas migas de pan (breadcumbs). Las migas de pan son esos elementos bastante comunes en los sitios web que indican al usuario en qué lugar del sitio web se encuentra - Usted está en Inicio > Servicios > Fontanería -. Las migas de pan es una lista de secciones por las que el usuario ha de pasar para llegar a la página en la que se encuentra desde la página inicial del sitio web. No solo debe marcarse con una lista, sino indicar que es un elemento de navegación con <map>.

ERRORES COMUNES

Un error de sintaxis común es no cerrar los elementos de una lista con </li>. Aunque en la versión HTML 4.01 cerrar los elementos es opcional (enlace en inglés), yo recomiendo cerrarlos ya que en XHTML 1.0, que es el lenguaje que se debería empezar a emplear, se deben cerrar porque todos los elementos deben ser bien formados.

Otro error frecuente es marcar mal las listas anidadas. Una lista anidada es una sublista como elemento de otra lista, de cualquier tipo. El error suele ser este:

 
 <!-- MAL EJEMPLO -->
 <ul>
   <li>Elemento Uno</li>
   <li>Elemento Dos</li>
   <ol>
     <li>Subelemento Dos Uno</li>
     <li>Subelemento Dos Dos</li>
   </ol>
   <li>Elemento Tres</li>
   <li>Elemento Cuatro</li>
 </ul>
 
 

Eso está mal, ya que la sublista ordenada no está incluída como un elemento de la lista desordenada que la engloba, es decir, está fuera de la marca de elemento <li>. Debería ser así:

 
 <!-- BUEN EJEMPLO -->
 <ul>
   <li>Elemento Uno</li>
   
   <li>Elemento Dos
      <ol>
        <li>Subelemento Dos Uno</li>
        <li>Subelemento Dos Dos</li>
      </ol>
   </li> <!-- he aquí la diferencia -->
 
   <li>Elemento Tres</li>
   <li>Elemento Cuatro</li>
 </ul>
 
 

Ten cuidado con esto, no es validado por el validador de HTML de la W3C. Tenlo en cuenta también a la hora de utilizar herramientas de edición de contenido, como FCKEditor, que marcan mal las listas anidadas a día de hoy.

servido por gigo 5 comentarios compártelo