Listas en HTML

1.1 Tipos de listas

Las listas en HTML son herramientas importantes para organizar y estructurar información. Permiten mostrar elementos con números o con puntos gruesos (marcas). Vamos a ver en detalle cada uno de los elementos de las listas en HTML: <ul>, <ol>, y <li>.

Listas no numeradas (<ul>)

La etiqueta <ul> se usa para crear listas no numeradas (marcadas). Los elementos de la lista se muestran con marcas (puntos, círculos, cuadrados).

Ejemplo:

    
      <ul>
        <li>Primer elemento de la lista</li>
        <li>Segundo elemento de la lista</li>
        <li>Tercer elemento de la lista</li>
      </ul>
    
  

Listas numeradas (<ol>)

La etiqueta <ol> se utiliza para crear listas numeradas. Los elementos de la lista se muestran con números o letras.

Ejemplo:

    
      <ol>
        <li>Primer elemento de la lista</li>
        <li>Segundo elemento de la lista</li>
        <li>Tercer elemento de la lista</li>
      </ol>
    
  

1.2 Elementos de la lista <li>

La etiqueta <li> se utiliza para indicar cada elemento en la lista, ya sea no numerada o numerada. Siempre debe estar anidada dentro de <ul> o <ol>.

Cómo recordar fácilmente estas etiquetas:

• Ordered List – lista ordenada (numerada)
• Unordered List – lista no ordenada (no numerada)
• List Item – elemento de la lista

Atributo type

Este atributo se puede usar dentro de <ul> y <ol> para cambiar el tipo de marcas o numeración. Por ejemplo, para <ol> se pueden usar valores "1", "A", "a", "I", "i", y para <ul> - "disc", "circle", "square".

Ejemplo de cambio de tipo de marcador para <ul>:

    
      <ul type="square">
        <li>Primer elemento de la lista</li>
        <li>Segundo elemento de la lista</li>
      </ul>
    
  

Ejemplo de cambio de tipo de numeración para <ol>:

    
      <ol type="A">
        <li>Primer elemento de la lista</li>
        <li>Segundo elemento de la lista</li>
      </ol>
    
  

Atributo start:

Este atributo se usa solo con <ol> para indicar el número inicial de la numeración.

Por ejemplo:

    
      <ol start="5">
        <li>Quinto elemento de la lista</li>
        <li>Sexto elemento de la lista</li>
      </ol>
    
  

Listas anidadas

Las listas pueden ser anidadas, lo que permite crear estructuras más complejas.

Ejemplo de lista anidada:

    
      <ul>
        <li>Primer elemento de la lista</li>
          <ul type="circle">
            <li>Primer elemento anidado</li>
            <li>Segundo elemento anidado</li>
          </ul>
        <li>Segundo elemento de la lista</li>
        <li>Tercer elemento de la lista</li>
      </ul>
    
  

1.3 Estilización de listas

Las listas se pueden estilizar con CSS, cambiando el color de las marcas, tipos de marcas y márgenes.

Ejemplo de estilización:

    
      ul.custom-list {
        list-style-type: katakana; /* Silabario japonés */
        color: blue; /* Color del texto */
      }

      ol.custom-list {
        list-style-type: hiragana-iroha; /* Sistema de orden japonés */
        color: green; /* Color del texto */
      }
    
  

    
      <ul class="custom-list">
        <li>Primer elemento de la lista</li>
        <li>Segundo elemento de la lista</li>
      </ul>

      <ol class="custom-list">
        <li>Primer elemento de la lista</li>
        <li>Segundo elemento de la lista</li>
      </ol>
    
  

Así, el uso de <ul>, <ol>, y <li> ayuda a estructurar el contenido y mejora su legibilidad en las páginas web.