Existen diferentes tipos de listas en HTML. En primer lugar, están las listas con viñetas. Con este tipo de lista, las entradas individuales de la lista están provistas de un carácter de viñeta, la llamada viñeta.
Las listas con viñetas se introducen con el elemento ul. Las entradas individuales de la lista se etiquetan con el elemento li.
<p>Temas actuales del foro</p> <ul> <li>CSS no se explica más</li> <li>Sala de exposición al estilo Hollywood de los años 40</li> <li>Lista desplegable CSS</li> <li>Conectar/desconectar php</li> <li>Mi pequeña sala de exposición - ¡un principiante pide consejos!</li> </ul> <li>Mi pequeña sala de exposición - ¡un principiante pide consejos!
He aquí un vistazo al resultado en el navegador:
Se inserta una viñeta antes de cada post. El aspecto por defecto viene determinado por el navegador. Aunque hay atributos que se pueden utilizar para influir en la apariencia de las listas, estos ya no deben ser utilizados. En su lugar, entran en juego las propiedades CSS.
Las listas de enumeración también pueden anidarse. En primer lugar, eche un vistazo a la siguiente ilustración:
Muestra claramente en qué consiste este tipo de anidamiento.
La sintaxis es la siguiente
<ul> <li>Tutoriales <ul> <li>2D</li> <li>3D</li> <li>Web</li> </ul> </li> <li>Vídeos de formación <ul> <li>3D</li> <li>Diseño multimedia</li> <li>Web</li> </ul> </li> <li>Consejos</li> <li>Tiendas</li> </ul>
Por lo tanto, una entrada de lista puede contener otra lista. No tiene por qué ser necesariamente una lista con viñetas. De hecho, también se pueden insertar otros tipos de listas, que se presentarán en este tutorial.
Por cierto, no es absolutamente necesario utilizar el cierre </li> en HTML5. Sin embargo, yo lo cerraría siempre para mejorar la legibilidad. Sintácticamente correcto también sería algo así:
<p>Los temas actuales del foro</p> <ul> <li>CSS no tendrá continuación <li>Showroom al estilo Hollywood de los años 40 <li>Fold-out list CSS <li>PHP connect/disconnect <li>Mi pequeño showroom - ¡un principiante pide consejos! </ul>
Listas numeradas
Además de las listas con viñetas, también se pueden definir listas numeradas. Aquí también hay una imagen que muestra en qué consisten las listas numeradas.
Las entradas de la lista van precedidas de números consecutivos. Las listas numeradas se introducen mediante el elemento ol.
El siguiente ejemplo muestra cómo puede utilizarse este elemento.
<ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>XML</li> </ol>
Al igual que en las listas con viñetas, las entradas individuales se marcan con el elemento li.
Teóricamente, las listas de enumeración también se pueden anidar.
<ol> <li>Tutoriales <ol> <li>2D</li> <li>3D</li> <li>Web</li> </ol> </li> <li>Vídeos de formación <ol> <li>3D</li> <li>Diseño multimedia</li> <li>Web</li> </ol> </li>Consejos</li> <li>Tiendas</li> </ol>
Sin embargo, el resultado en el navegador es aleccionador.
No se consigue la numeración según el siguiente esquema:
1. tutoriales 2D
1.1 3D
1.2 Web
- Videotutoriales 3D
2.1 Diseño multimedia
2.2 Web - Consejos
- Tiendas
Esto no es posible con HTML puro. De hecho, hay que utilizar CSS para numerar automáticamente el contenido de acuerdo con dicho esquema.
Listas de definición
Otra variante de las listas son las llamadas listas de definición. Aquí también hay un ejemplo del aspecto final de una lista de este tipo en el navegador:
El principal campo de aplicación de las listas de definición son los glosarios. Esta es la sintaxis que ha conducido a la salida mostrada arriba
<dl> <dt>AM</dt> <dd>AM - Air Mail</dd> <dd>AM - Air Marshal</dd> <dd>AM - Amberg</dd> <dd>AM - Americium</dd>
<dd>AM - Amstetten</dd> <dt>AN</dt> <dd>AN - arriba nombrado</dd> <dd>AN - Nodo de Acceso</dd> <dd>AN - Ancona</dd> </dl>Las listas de definición siempre tienen tres elementos. Las listas se introducen mediante el elemento dl. Se trata de la estructura externa. La expresión a definir se caracteriza por un elemento dt. En última instancia, se trata del término de definición. A su vez, la descripción de la definición se especifica mediante el elemento dd.
También es posible anidar listas de definiciones. El funcionamiento es idéntico al de las demás variantes de listas.
El aspecto predeterminado de las listas de definiciones viene determinado, una vez más, por el navegador. En última instancia, sin embargo, usted mismo puede definir el diseño deseado utilizando CSS.
En versiones anteriores de HTML también existían listas de menús y directorios. Para ello se utilizaban los dos elementos menu y dir. El elemento dir ya no se incluye en HTML5. La situación es diferente con menu. Este elemento se ha implementado recientemente y puede utilizarse para menús contextuales y barras de herramientas en el futuro. He aquí un ejemplo de cómo el W3C prevé una aplicación de menú típica:
<menú type="barra de herramientas"> <li> <menú label="Archivo"> <button type="botón" onclick="fnew()">Nuevo...</button> <button type="botón" onclick="fopen()">Abrir...</button> <button type="button" onclick="fsave()">Guardar</button> <button type="button" onclick="fsaveas()">Guardar como...</button> </menú> </li> <li> <menú label="Editar"> <button type="botón" onclick="ecopy()">Copiar</button> <button type="botón" onclick="ecut()">Cortar</button> <button type="botón" onclick="fsaveas()">Guardar como...Cortar</button> <button type="button" onclick="epaste()">Pegar</button> </menu> </li> <li> <menu label="Ayuda"> <li><a href="help.html">Ayuda</a></li> <li><a href="about.html">Acerca de</a></li> </li> </li> </menú>.
De momento, sin embargo, esto aún no está soportado por ningún navegador.
Por lo tanto, el menú no debe utilizarse en este momento.
Diseño de listas
Una nota sobre las listas. Muchos sitios web se basan en los atributos HTML correspondientes para el diseño de listas. Por ejemplo, puede utilizar <ul type="square"< para asegurarse de que se muestran rectángulos delante de las entradas en las listas con viñetas.
También se puede definir el tipo de numeración para las listas numeradas.
<ol type="A">
Aquí, sin embargo, no debería utilizar todo lo que se ofrece. Las propiedades CSS correspondientes son más adecuadas. Por lo tanto, en realidad debería utilizarlas para personalizar las listas según sus deseos. En esta serie encontrará más información sobre CSS.
