Listas
Una forma de organizar el datos de texto es por medio de las listas. La utilización de las listas tiene como propósito tener una estructura para mostrar información de forma clara.
Hay tres tipos de listas:
- ordenadas: listas en las que la secuencia de los elementos es importante.
- desordenadas: colecciones de artículos que aparecen en ningún orden en particular
- descriptivas: istas que consisten en pares de nombre y valor, incluidos, entre otros, Términos y definiciones.
Otra caracterísitica importante de las listas es que pueden anidarse, es decir, que podemos utilizar una lista dentro de otra. A modo de ejemplo, tenemos una lista descriptiva utilizada en el sitio web de Renault Argentina donde se enumeran con una lista desordenada las caracterísiticas de un vehículo:
Listas ordenadas
Las listas ordenadas son aquellas que sus elementos tienen un criterio de ordenamiento, por ejemplo, una tabla de posiciones de un campeonato.
Las listas ordenadas utilizan las etiqueta <ol> que significa order list. Dentro de esta etiqueta deben ir los elementos que la componen, los elementos van dentro de la etiqueta <li>. Veamos un ejemplo:
Si se desea comenzar desde un número distinto de 1 (uno) puede utilizarse el atributo start:
Si desea en lugar de enumerar con un número hacerlo con una letra, podemos utilizar el atributo type:
Si se desea comenzar desde otra letra que no sea la A tendramos que utilizar el atributo start agregando el número de la posición del ABECEDARIO desde donde comenzar. Por ejemplo, si empezamos desde la letra C el valor de start será 3:
Listas desordenadas
Casi cualquier lista de ejemplos, nombres, componentes, pensamientos u opciones es tratada normalmente como una lista desordenada.
De hecho, la mayoría de las listas entran en esta categoría. Las listas desordenadas se muestran con una viñeta antes de cada elemento de la lista, esta viñeta puede pero modificarse desde CSS (hoja de estilos).
Para identificar una lista desordenada, se debe mirar la etiqueta de apertura <ul> todos los elementos de la lista se colocarán dentro de esta etiqueta y se finalizará la lista desordenada con la etiqueta de cierre </ul>. Cada elemento de la lista estará dentro de la etiqueta de apertura <li> que tendrá una etiqueta de cierre </li>. El navegador agrega un tipo de viñeta con un diseño por defecto. A modo de ejemplo observemos el código y su resultado:
Es posible por medio de CSS (se verá cuando trabajemos con hojas de estilos) construir una lista de forma horizontal:
Este tipo de listas se usan mucho para crear MENÚS de acceso a contenidos.
Listas descriptivas
Este tipo de listas se utilizan para crear listas de conceptos o descripciones. Son muy útiles para organizar definiciones. Las listas descriptiva utilizan una etiqueta principal que es <dl>.
Dentro de la etiqueta <dl> estarán las descripciones organizadas por títulos y sus decripciones. Para los títulos utilizamos la etiqueta <dt> y para las descripciones <dd>. Por ejemplo:
👉 IMPORTANTE: Estas listas NO pueden estar dentro de una etiqueta <p>