Las listas se utilizan en las páginas web para organizar la información. Al escribir para la Web, encabezados, párrafos cortos y listas pueden hacer que tu página sea más clara y fácil de leer.
HTML se puede utilizar para crear tres tipos de listas: listas de descripción, listas ordenadas y listas no ordenadas.
Todas las etiquetas de lista tienen los siguientes elementos comunes:
- Cada lista tiene un elemento externo específico para ese tipo de lista. Por ejemplo,
<ul>y</ul>para listas desordenadas,<ol>y</ol>para listas ordenadas, o<dl>y</dl>para listas de definiciones. - Cada elemento de la lista tiene su propia etiqueta:
<dt>y<dd>para las listas del glosario, y<li>para las otras listas.
Las etiquetas de cierre para <dd>, <dt> y <li> eran opcionales en HTML. Para cumplir con HTML5, usa las etiquetas de cierre de </dd>, </dt>, </li>.
Elemento de listas ordenadas
Las listas ordenadas están rodeadas por las etiquetas <ol> … </ol> (ol significa ordered list/lista ordenada), y cada elemento de la lista se incluye en la etiqueta <li> … </li> (list item/elemento de lista).
Cuando el navegador muestra una lista ordenada, numera y sangra secuencialmente cada uno de los elementos. No tienes que realizar la numeración tú mismo y, si agregas o eliminas elementos, el navegador vuelve a numerarlos la próxima vez que se cargue la página.
Las listas ordenadas son listas en las que cada artículo está numerado o etiquetado con algún tipo de contador (como letras o números romanos). Usa listas numeradas solo cuando la secuencia de elementos en la lista sea relevante. Las listas ordenadas son buenas para los pasos a seguir o las instrucciones para los lectores, o cuando deseas clasificar los elementos en una lista. Si solo desea indicar que algo tiene una cantidad de elementos que pueden aparecer en cualquier orden, usa una lista desordenada.
Por ejemplo, la siguiente es una lista ordenada de pasos que explican cómo aprender HTML. Puedes ver cómo se muestra la lista en un navegador ejecutando el siguiente código de ejemplo:
<h1>Cómo aprender HTML</h1> <ol> <li>Tomar conocimientos básicos de editores de texto y navegadores</li> <li>Estudiar las definiciones y etiquetas</li> <li>Tomarse entre 2 a 3 horas de prácticas diariamente</li> <li>Crear sitios webs de ejemplos</li> <li>Repasar lo aprender con el curso HTML desde Cero</li> </ol>
Atributos: type, start y reversed
Hay dos personalizaciones que son específicas para las listas ordenadas. El primero te permite cambiar el estilo de numeración de la lista y el segundo le permite cambiar la numeración en sí. Hay dos formas de cambiar el estilo de numeración: la propiedad list-style-type de CSS y el atributo de type, que está obsoleto en HTML5.
Si estás creando una nueva lista ordenada, siempre debes usar la propiedad CSS, sin embargo, puedes ver páginas web existentes en las que se usa el atributo type.
- El atributo type configura el símbolo utilizado para ordenar la lista. Por ejemplo, para crear una lista ordenada y organizada por letras mayúsculas, utilizas
<ol type="A">.
La siguiente tabla documenta el atributo type y sus valores para las listas ordenadas.
| Valor | Símbolo |
|---|---|
| 1 | Números (por defecto): 1, 2, 3, … |
| A | Letras mayúsculas: A, B, C, … |
| a | Letras minúsculas: a, b, c, … |
| I | Números romanos: i, ii, iii, … |
| i | Números romanos en minúsculas: I, II, III, … |
- El atributo start es útil cuando se necesita una lista para comenzar con un valor entero distinto de 1 (por ejemplo,
start="10"). - Utiliza el nuevo atributo HTML5 reversed (set reversed=”reversed”) para configurar los marcadores de lista para que se muestren en orden descendente.
Elementos de listas no ordenadas
Una lista desordenada muestra una viñeta o marcador de lista, antes de cada entrada de la lista. Esta viñeta puede ser de varios tipos: ‘disc’, (por defecto), ‘square’ y ‘circle’.
Las listas desordenadas comienzan con una etiqueta <ul> y terminan con una etiqueta </ul>. Cada elemento de la lista comienza con una etiqueta <li> y termina con una etiqueta </li>. El código para configurar el encabezado y la lista desordenada es el siguiente:
<!DOCTYPE html> <html lang="es"> <head> <title>Ejemplo de cita en bloque</title> <meta charset="utf-8"> </head> <body> <h1>Mis colores favoritos</h1> <ul> <li>Azul</li> <li>Rojo</li> <li>Verde</li> </ul> </body> </html>
Atributos: disc, square y circle
Al igual que con las listas ordenadas, las listas desordenadas se pueden personalizar utilizando el atributo type o la propiedad CSS list-style-type. Como se mencionó en la sección de listas ordenadas, el atributo type ya no es válido para HTML5. Los estilos son los siguientes:
- disc: un disco, este estilo es el predeterminado
- square: obviamente, un cuadrado en lugar de un disco.
- circle: en comparación con el disco, que la mayoría de los navegadores representan como un círculo relleno, este valor debe generar un círculo sin rellenar.
En este caso, los valores para list-style-type y para el atributo type son los mismos. En el siguiente ejemplo de entrada y salida, verás una comparación de estos tres tipos como se representa en un navegador:
<ul style="list-style-type: disc">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ul style="list-style-type: square">
<li>HTML</li>
<li>Desde</li>
<li>Cero</li>
</ul>
<ul style="list-style-type: circle">
<li>Aprender</li>
<li>Desde</li>
<li>Cero</li>
</ul>Viñetas de imagen
Si no te gusta ninguno de los estilos de viñetas utilizados en las listas desordenadas, puedes sustituir una imagen de tu propia elección en lugar de ellas. Para hacerlo, usa la propiedad list-style-type. Al establecer esta propiedad, puedes usar una imagen de tu elección para las viñetas en su lista. Aquí hay un ejemplo:
<ul style="list-style-image: url(http://assets.css-tricks.ir/images/css-tricks.ir.png);"> <li>Ejemplo</li> </ul>
No te preocupes mucho por lo que todo esto significa en este momento. Discutiré las imágenes más adelante. En este momento, todo lo que necesitas saber es que la URL entre paréntesis debe apuntar a la imagen que deseas usar.
Posición del estilo de lista
Como se ha visto hasta el momento, cuando los elementos se formatean en una lista y el elemento de la lista abarca más de una línea, las líneas de texto que siguen a la primera se alinean con el comienzo del texto en la primera línea. Si prefieres que comiencen en la posición de la viñeta o número de lista, usa la propiedad list-style-type:
<ul style="list-style-position: inside;"> <li>HTML</li> <li>desde</li> <li>Cero</li> </ul>
El valor predeterminado es outside, y la única alternativa es outside. Finalmente, si deseas modificar varias propiedades relacionadas con la lista a la vez, simplemente puedes usar la propiedad list-style. Puedes especificar tres valores para el list-style: el tipo de estilo de lista, la posición de estilo de lista y la URL de la imagen que se utilizará como estilo de viñeta. Esta propiedad es solo un atajo para usar si deseas manipular varias de las propiedades relacionadas con la lista simultáneamente. Aquí hay un ejemplo:
<ul style="list-style: circle inside URL(http://assets.css-tricks.ir/images/css-tricks.ir.png)"> <li>Ejemplo</li> </ul>
Elemento Lista de Descripción
HTML5 introduce un nuevo nombre de elemento, lista de descripción, para reemplazar el elemento de la lista de definición (utilizado en XHTML y versiones anteriores de HTML). Una lista de descripción es útil para organizar los términos y sus descripciones. Los términos se destacan, y sus descripciones pueden ser tan largas como sea necesario para transmitir su mensaje.
Las listas de descripción también son útiles para organizar las preguntas más frecuentes (FAQ) y sus respuestas. Las preguntas y respuestas se compensan con sangría. Mira la siguiente imagen para ver un ejemplo de una página web que utiliza una lista de descripción:
<!DOCTYPE html> <html lang="es"> <head> <title>Ejemplo de cita en bloque</title> <meta charset="utf-8"> </head> <body> <h1>Ejemplo de Lista de Descripción</h1> <dl> <dt>TCP</dt> <dd>El Protocolo de control de transmisión es un método (protocolo) utilizado junto con el Protocolo de Internet (IP) para enviar datos en forma de unidades de mensaje, llamadas paquetes, entre ordenadores a través de Internet.</dd> <dt>IP</dt> <dd>El Protocolo de Internet es el método o protocolo mediante el cual se envían datos de un ordenador a otro en Internet. Cada ordenador en Internet está identificado de forma única por una dirección IP.</dd> <dt>FTP</dt> <dd>El protocolo de transferencia de archivos es un protocolo utilizado para intercambiar archivos entre ordenadores en Internet.</dd> <dt>HTTP</dt> <dd>El protocolo de transferencia de hipertexto es el protocolo utilizado para intercambiar texto, imágenes gráficas, sonido, vídeo y otros archivos multimedia en la Web.</dd> </dl> </body> </html>
Las listas de descripción comienzan con la etiqueta <dl> y terminan con la etiqueta </dl>. Cada término o nombre en la lista comienza con la etiqueta <dt> y termina con la etiqueta </dt>. Cada descripción comienza con la etiqueta <dd> y termina con la etiqueta </dd>.
Listas Anidadas
¿Qué pasa si pones una lista dentro de otra lista? Las listas de agrupamiento están bien en lo que respecta a HTML; simplemente coloca toda la estructura de la lista dentro de otra lista como uno de sus elementos. La lista anidada simplemente se convierte en otro elemento de la primera lista, y está sangrada del resto de la lista.
Las listas de este tipo funcionan especialmente bien para las entidades tipo menú en las que desea mostrar una jerarquía (por ejemplo, en tablas de contenido) o como contornos. La sangría de listas anidadas en el propio código HTML ayuda a mostrar su relación con el diseño final:
<ol>
<li> WWW </li>
<li> Organización </li>
<li> HTML inicial </li>
<li>
<ul>
<li> Qué es HTML </li>
<li> Cómo escribir HTML </li>
<li> Estructura doc. </li>
<li> Encabezados </li>
<li> Párrafos </li>
<li> Comentarios </li>
</ul>
</li>
<li> Enlaces </li>
<li> Más HTML </li>
</ol>Muchos navegadores dan formato a listas ordenadas anidadas y listas desordenadas anidadas de manera diferente a sus listas adjuntas. Por ejemplo, podrían usar un símbolo distinto de una viñeta para una lista anidada, o podrían numerar la lista interna con letras (a, b, c) en lugar de números. Si necesitas asegurarte de qué símbolos o esquema de numeración se utilizarán para una lista, especifica un estilo usando CSS.
Genial justo esto es lo que me faltaba para terminar mi trabajo, al fiiiiin T.T GRACIAS!