• Cuarzo.dev
  • Posts
  • Cómo Crear LISTAS Ordenadas y Desordenadas en HTML

Cómo Crear LISTAS Ordenadas y Desordenadas en HTML

Descubre cómo crear y estilizar listas en HTML. Aprende a usar listas no ordenadas y listas ordenadas. Personaliza los marcadores con CSS y el atributo type. Explora listas de descripción, listas anidadas, y cómo hacer listas horizontales con CSS

Listas HTML

Tenemos dos tipos de listas en HTML:

  • No ordenadas

  • Ordenadas

<h2>No ordenada</h2>

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>  

<h2>Ordenada</h2>

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol> 

Resultado:

No ordenada

  • HTML
  • CSS
  • JavaScript

Ordenada

  1. HTML
  2. CSS
  3. JavaScript

Listas no ordenadas

Una lista no ordenada en HTML se hace usando la etiqueta <ul>. Y cada elemento dentro de ella son etiquetas <li>.

Listas no ordenadas - marcador

Con la propiedad de CSS list-style-type podemos cambiar el marcador de cada elemento de la lista

  • disc: es un círculo relleno

  • circle: es una circunferencia

  • square: es un cuadrado

  • none: no sale marcador

Listas ordenadas

Una lista ordenada en HTML se hace usando la etiqueta <ol> y los elementos de dentro de ella usan la etiqueta <li>

Listas ordenadas - atributo type

El atributo type se usa para definir el marcador.

  • type=”1”: Con números (es la opción por defecto)

  • type=”A”: Con letras mayúsculas

  • type=”a”: Con letras minúsculas

  • type=”I”: Con números romanos en mayúsculas

  • type=”i”: Con números romanos en minúsculas

Listas de descripción

HTML también admite listas de descripción.

Una lista de descripción es una lista de términos, con una descripción de cada término.

La etiqueta <dl> define la lista de descripción, la etiqueta <dt> define el término (nombre) y la etiqueta <dd> describe cada término:

<dl>
  <dt>HTML</dt>
  <dd>Lenguaje de marcado</dd>
  <dt>CSS</dt>
  <dd>Lenguaje de estilos</dd>
</dl>

Listas anidadas

Las listas pueden anidarse (meter listas dentro de listas).

<ul>
  <li>Lenguaje de marcado</li>
  <li>Lenguaje de programación
    <ul>
      <li>JavaScript</li>
      <li>PHP</li>
    </ul>
  </li>
  <li>Lenguaje de estilos</li>
</ul>

Resultado:

  • Lenguaje de marcado
  • Lenguaje de programación
    • JavaScript
    • PHP
  • Lenguaje de estilos

Control del conteo en la lista

Por defecto una lista ordenada empieza por el número 1, pero esto se puede cambiar usando el atributo start.

Lista horizontal con CSS

Con CSS se le pueden dar muchos estilos a las listas, pero uno muy común es hacer una lista en horizontal (por ejemplo para un menú)

Suscríbete para seguir leyendo...

Este contenido es gratuito, pero debes estar suscrito a Cuarzo.dev para continuar leyendo.

Already a subscriber?Sign In.Not now

Join the conversation

or to participate.