Listas no ordenadas y Listas ordenadas
Listas no ordenadas
Las listas no ordenadas son las más sencillas y las que más se utilizan. Una lista no ordenada es un conjunto de elementos relacionados entre sí pero para los que no se indica un orden o secuencia determinados. La etiqueta <ul> encierra todos los elementos de la lista y la etiqueta <li> cada uno de sus elementos.
El siguiente código HTML muestra un ejemplo sencillo de lista no ordenada:
<html>
<head><title>Ejemplo de etiqueta UL
</title></head>
<body>
<h1>Menú</h1>
<ul>
<li>Inicio</li>
<li>Noticias</li>
<li>Artículos</li>
<li>Contacto</li>
</ul>
</body>
</html>
Ejemplo de uso de la etiqueta ul
El navegador por defecto muestra los elementos de la lista tabulados y con una pequeña viñeta formada por un círculo negro. Como ya se sabe, el aspecto con el que se muestran los elementos de las listas se puede modificar mediante las hojas de estilos CSS.
Listas ordenadas
Las listas ordenadas son casi idénticas a las listas no ordenadas, salvo que en este caso los elementos relacionados se muestran siguiendo un orden determinado. Cuando se crea por ejemplo una lista con las instrucciones de un producto, es importante el orden en el que se realiza cada paso. Cuando se muestra un índice o tabla de contenidos en un libro, es importante el orden de cada elemento del índice.
En todos estos casos, la lista más adecuada es la lista ordenada, que se define mediante la etiqueta <ol>. Los elementos de la lista se definen mediante la etiqueta <li>, la misma que se utiliza en las listas no ordenadas
El siguiente código HTML muestra un ejemplo sencillo de lista ordenada:
<html>
<head><title>Ejemplo de etiqueta OL</title></head>
<body>
<h1>Instrucciones</h1>
<ol>
<li>Enchufar correctamente</li>
<li>Comprobar conexiones</li>
<li>Encender el aparato</li>
</ol>
</body>
</html>
Ejemplo de uso de la etiqueta ol
El navegador muestra la lista de forma muy parecida a las listas no ordenadas, salvo que en este caso no se emplean viñetas gráficas en los elementos, sino que se numeran de forma consecutiva. El tipo de numeración empleada también se puede modificar aplicando hojas de estilos CSS a los elementos de la lista.
Comentarios
Publicar un comentario