Cómo crear listas en HTML

Las listas en HTML son bastante utilizadas para organizar la información dentro una página web. En general, existen tres tipos: las listas no ordenadas, las listas ordenadas y las listas de definición. Estas pueden contener textos, imágenes, iconos, ...
Publicado
Actualizado
Engagements 0 Comentario

Las listas en HTML son bastante utilizadas para organizar la información dentro una página web. En general, existen tres tipos: las listas no ordenadas, las listas ordenadas y las listas de definición. Estas pueden contener textos, imágenes, iconos, enlaces, entre otros. A continuación, mostraremos la sintaxis de cada una de ellas.

Listas no ordenadas

Se llaman así porque no tienen ningún orden en sus elementos. Son muy empleadas, sobre todo, en los menús de navegación.

Para crear una lista no ordenada, primero se deben colocar las etiquetas de apertura y de cierre <ul> y </ul> en el documento HTML. UL en inglés significa “Unordered list”, y al utilizar estas etiquetas, se está indicando que se iniciará una lista no ordenada. Luego, dentro de ellas se deben agregar cada uno de los elementos de la lista, haciendo uso de las etiquetas <li> y </li>. LI en inglés significa “List item”.

Ejemplo

<p>Algunos deportes colectivos son:</p>
        
        <ul>
            <li>Fútbol</li>
            <li>Beisbol</li>
            <li>Baloncesto</li>
            <li>Voleibol</li>
        </ul>

Ver ejemplo en codepen

Listas ordenadas

Son listas en las que todos sus elementos aparecen numerados siguiendo un orden, a diferencia de las listas no ordenadas.

Para incluir una lista ordenada dentro de un documento HTML, en primer lugar, se deben colocar las etiquetas de apertura y de cierre <ol> y </ol>. OL en inglés significa “Ordered list”.  Después, se deben ir agregando, siguiendo un determinado orden, cada uno de los elementos de la lista con las etiquetas <li> y </li>, de forma similar que en las listas no ordenadas.

Ejemplo

<h2>Pasos para encender una computadora</h2>
        
        <ol>
            <li>Oprime el botón de Encender. </li>
            <li>Enciende el monitor oprimiendo el botón de encendido. </li>
            <li>Empieza a disfrutar de tu computadora. </li>
        </ol>

Ver ejemplo en codepen

Listas de definición

Estas listas son un poco más complejas que las anteriores ya que cuentan con distintos elementos en su estructura. Por lo normal, se emplean para mostrar una serie de términos relacionados, con una pequeña descripción referente a cada uno de ellos en formato de lista.

La lista de definición consta de tres partes:

  1. Etiquetas <dl> y </dl>, que indican que se iniciará una lista de definición. DL en inglés quiere decir “Definiton list”.
  2. Etiquetas <dt> y </dt>, que son utilizadas para definir el término de una lista. DT en inglés quiere decir “Definition term”.
  3. Etiquetas <dd> y </dd>, que son empleadas para dar una descripción del término. DD en inglés quiere decir “Definition description”.

Ejemplo

<p>Algunos lenguajes que necesitas aprender para ser desarrollador web:</p>
        
        <dl>
            <dt>HTML</dt>
            <dd>Agrega estructura a tu página web</dd>
            <dt>CSS</dt>
            <dd>Agrega estilos a tu página web</dd>
            <dt>JavaScript</dt>
            <dd>Agrega inteligencia a tu página web</dd>
        </dl>
        

Ver ejemplo en codepen

Como pudimos darnos cuenta, hacer listas en html es algo muy fácil.

Comentarios