Tipos de listas

Las listas tienen diferentes objetivos dentro de la página web.

Son la fomar más adecuada de presentar información de forma esquemática

Muy útiles para construir barras de navegación.

Hay diferentes tipos de lista aplicables con diferentes fines: menus, lista de datos, esquemas...

Listas desordenadas

La etiqueta <ul>
significa unordered list, literalmente lista desordenada, y se corresponde con las viñetas en los procesadores de texto: son listas donde cada elemento está precedido de un símbolo, como un punto o un disco. EL formato es el que sigue:

<!doctype html>

<html lang="es">

<head>

<meta charset="utf-8">

<title>Miembros del claustro</title>

</head>

<body>

<h2>El equipo</h1>

<ul>

<li>Juan Pérez García</li>

<li>María López</li>

<li>Luis Pérez</li>

<li>Ana Díaz</li>

</ul>

<h2>Las Aulas</h2>

<ul type="circle">

<li>Aula 101</li>

<li>Aula 201</li>

<li>Aula 202</li>

<li>Aula 100</li>

</ul>

<h2>Días</h2>

<ul type="square">

<li>Lunes</li>

<li>Miércoles</li>

<li>Viernes</li>

</ul>

Usando listas desordenadas en la página web

Prueba el ejemplo y verás las diferentes formas de viñeta o bullet, y si se no quieren usar las viñetas se puede poner la propiedad list-style-type a none.

La viñeta puede sustituirse por un icono, pero para ello se necesita CSS con el pseudo selector before.

También se puede usar la propiedad de estilo list-style-image, a la que se le da el valor de la url de nuestra imagen url('imagen.gif') .

<!doctype html>

<html lang="es">

<head>

<meta charset="utf-8">

<title>Formas de pago </title>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" >

<style>

.lista{

list-style:none}

.lista li::before{

content:'\f35a';

font-family: "Font Awesome 5 Free";

margin-right: 4px;

</style>

</head>

<body>

<h2>Formas de pago</h1>

<ul class="lista">

<li>Pay Pal</li>

<li>Visa</li>

<li>Trasnferencia</li>

</ul>

Usando iconos o simbolos propios como bullets

Es simple: primero se le quita la viñeta por defecto y luego se añade optra mediante el psuedo selector before. Puedes usar un icono como en el ejemplo o un símbolo como +, $, #  o inclluso en content podrís poner una imagen url('imagen.gif')

La etiqueta <ul> admite estos parámetros:

Parámetro Significado Resultado
compact Indica al navegador que debe representar la lista de la manera más compacta posible.
  • Primer elemento
  • Segundo elemento
type="disc", "circle", "square", "none" Indica al navegador el dibujo que precederá a cada elemento de la lista. Para mayor flexibilidad se admite también como parámetro de <li>.
  • Tipo disc
  • Tipo circle
  • Tipo square

Pero actualmente se tiende a usar más las reglas CSS para definir el formato de las listas, en este caso en lugar del atributo ype, se usaría la propiedad  list-style-type dentro de una definición de estilo CSS o en línea con el atributo style: style="list-style-type: circle"

Las listas no ordenasa son las listas más simples de HTML: simplemente muestran sus items uno tras otro con una viñeta  aus izquierda

Las listas ordenadas

Las listas también pueden presentarse con sus elementos ordenados. HTML no ordena solo añade una viñeta alfanumérica que va cambiando para cada item de la lsita, como 1,2,3 o a,b,c.

El tipo de ordenación o de indice se controla con el argumento type (1, a, A, i, I) o por las reglas de estilo CSS con la propiedad list-style (decimal, upper-alpha, lower-alpha, upper-roman, lower-alpha, y otros)

<ol type="a">

<li>Enero</li>

<li>Abril</li>

<li>Junio</li>

<li>Octubre</li>

</ol>

Esta sería un lista ordenada

Las listas ordenadas admiten diferentes formas de numerar sus elementos, orden inverso y modificar los números de los elementos que la forman. Son útiles para situaciones donde el orden de los elementos sea importante, por ejemplo: pasos en una receta de cocina, capítulos en un curso de aprendizaje, orden de imprtancia de los elementos, etc.

type:
Este atributo permite cambiar la forma de numerar los elementos de las listas ordenadas. El valor puede ser
  • 1: para numeros árabes, es el valor por defecto.
  • I, i: para números romanos en mayúsculas o en minúsculas(I, II, III)
  • A, a: usar letras mayúsculas o minúsculas.
start
Con este atributo puedes especificar el número de orden por donde comenzar a contar los elementos. Es un valor numérico, de manera que si el tipo de índice es alfabético (type="a") y se pone start="2", los elementos empiezan a numerarse por la letra b.
reversed
Es una marca sin atributo para ordenar los índices en forma descendente. La lsita no cambia de orden lo que cambia es el orden de los números o las letras que se usen para numerar cada elemento.
Una lista ordenada se caracteriza por presentar delante de cada elemento un caracter numérico o alfabético para indicar un orden.

Listas de definiciones

Este tipo de lista utiliza se utiliza para crear llistas don dos niveles para sus items: una encabezado y un bloque. Habría una jerarquía de niveles ente ambos niveles. Los niveles se señalan mediante indentaciones: el bloque aparece indentado respecto a su encabezado.

Las etiquetas <dl></dl>
define la lista y en lugar de bloques <li>
se utilizan <dt>
para el encabezado y <dd>. para el bloque dependiente. Es como si tuvieramos una lista de conceptos y sus definiciones (el texto indentado). Para entenderlo lo mejor es verlas en marcha:

<dl>

<dt>HTML</dt>

<dd>Lenguaje para construir documentos web</dd>

<dt>CSS</dt>

<dd>Reglas para definir la apariencia de una página web</dd>

<dd>Se usan en style o en archivos independientes</dd>

</dl>

Esta sería un lista ordenada

Con los estilos CSS pueden cambiarse la apariencia de encabezados y definiciones, por ejemplo colcando los primeros en negrita y el resto en cursiva.

La etiqueta <dl> sólo admite como parámetro el ya conocido compact, que tiene el mismo comportamiento que con los otros dos tipos de lista anteriores. Un elemento <dt>puede contener varios elementos <dd>.

<head>

<meta charset="utf-8">

<style>

dl {

display:grid;

grid-template-columns: 20px auto;

}

</style>

</head>

<body>

<dl>

<dt>HTML</dt>

<dd>Lenguaje para construir documentos web</dd>

<dt>CSS</dt>

<dd>Reglas para definir la apariencia de una página web</dd>

</dl>

</body>

Una lista de definicios en línea

Este ejemplo se ve como romper la estructura de la lsita de definiciaón apra que encabezado y texto aparezcan en una misma linea. Más fácil que sar estilos basados en foat o displays inline. Una muestra más de la potencia de la estructura grid

Las listas de definición permiten mostrar encabezadas y texto relacionado. Los elementos dd son bloques pero se pueden redefinir como bloques inline, eliminando el salto de linea entre encabezados y texto.