Elemento de lista HTML

Introducción

Las listas HTML se utilizan para mostrar elementos como una lista y juegan un papel crucial en el desarrollo web. La etiqueta HTML li se utiliza para definir un elemento en una lista. La etiqueta li se utiliza junto con la etiqueta ul o ol y es perfecta para crear listas no ordenadas y ordenadas. Esta práctica te proporcionará una guía paso a paso sobre cómo crear listas HTML utilizando la etiqueta li.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haz clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puedes actualizar la pestaña Web 8080 para previsualizar la página web.

Crear una lista no ordenada

Podemos crear una lista no ordenada utilizando la etiqueta HTML ul. Para agregar elementos a la lista, debemos utilizar la etiqueta li. Vamos a crear una lista no ordenada con tres elementos.

<!-- index.html -->

<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ul>

En el código anterior, hemos utilizado la etiqueta ul para crear una lista no ordenada y la etiqueta li para definir cada elemento de la lista.

Crear una lista ordenada

Crear una lista ordenada es muy similar a crear una lista no ordenada, con la única diferencia que es el uso de la etiqueta ol en lugar de la etiqueta ul. Vamos a crear una lista ordenada con tres elementos.

<!-- index.html -->

<ol>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ol>

En el código anterior, hemos utilizado la etiqueta ol para crear una lista ordenada y la etiqueta li para definir cada elemento de la lista.

Agregar atributos a la etiqueta li

La etiqueta li admite varios atributos que se pueden utilizar para modificar el estilo de la viñeta del elemento de lista. Un atributo que se utiliza comúnmente es el atributo type que se puede utilizar para cambiar la viñeta del elemento de lista. Vamos a actualizar la lista no ordenada del paso 1 utilizando el atributo type.

<!-- index.html -->

<ul>
  <li type="circle">Elemento 1</li>
  <li type="disc">Elemento 2</li>
  <li type="square">Elemento 3</li>
</ul>

En el código anterior, hemos utilizado el atributo type para agregar diferentes viñetas a los elementos de lista. Hemos utilizado el valor circle para hacer que la viñeta sea un círculo sin relleno, el valor disc para hacer que la viñeta sea un círculo relleno y el valor square para hacer que la viñeta sea un cuadrado relleno.

Anidar listas

Podemos anidar múltiples listas dentro de una sola lista. Vamos a crear una lista ordenada y agregar una lista no ordenada dentro del segundo elemento de la lista ordenada.

<!-- index.html -->

<ol>
  <li>Elemento 1</li>
  <li>
    Elemento 2
    <ul>
      <li>Sub-elemento 1</li>
      <li>Sub-elemento 2</li>
    </ul>
  </li>
  <li>Elemento 3</li>
</ol>

En el código anterior, hemos utilizado la etiqueta ul para crear una lista no ordenada y la etiqueta li para definir cada elemento de la lista. También hemos anidado una lista no ordenada dentro del segundo elemento de la lista ordenada.

Resumen

En este laboratorio, hemos aprendido cómo crear listas HTML utilizando la etiqueta li. Comenzamos creando una lista no ordenada utilizando las etiquetas ul y li. Luego creamos una lista ordenada utilizando las etiquetas ol y li. También aprendimos cómo agregar atributos a la etiqueta li para modificar el estilo de la viñeta del elemento de lista. Finalmente, aprendimos cómo anidar múltiples listas dentro de una sola lista.