Buscar..


Introducción

HTML ofrece tres formas de especificar listas: listas ordenadas, listas no ordenadas y listas de descripción. Las listas ordenadas usan secuencias ordinales para indicar el orden de los elementos de la lista, las listas no ordenadas usan un símbolo definido como una viñeta para enumerar los elementos sin un orden designado, y las listas de descripción usan sangrías para enumerar los elementos con sus hijos. Este tema explica la implementación y combinación de estas listas en el formato HTML.

Sintaxis

  • <ol> ordered list items </ol>
  • <ul> unordered list items </ul>
  • <li> list item (ordered and not) </li>
  • <dl> description list items </dl>
  • <dt> description list title </dt>
  • <dd> description list description </dd>

Observaciones

Ver también

Puede agregar una propiedad CSS de tipo estilo de lista a una etiqueta <ul> para cambiar el tipo de icono que se usa para marcar cada elemento de lista, por ejemplo, <ul style="list-style-type:disc"> . Se admiten los siguientes tipos de estilo de lista:

  • "list-style-type: disc" es el punto predeterminado.
  • "list-style-type: circle" es un círculo sin rellenar.
  • "list-style-type: square" es un cuadrado relleno.
  • "list-style-type: none" no utiliza ninguna marca.

También puede agregar un atributo de tipo a una etiqueta <ol> para cambiar la forma en que se realiza la numeración, por ejemplo, <ol type="1"> . Se permiten los siguientes tipos:

  • type = "1" es la forma predeterminada.
  • type = "A" usa letras mayúsculas en orden alfabético
  • type = "a" usa letras minúsculas en orden alfabético
  • type = "I" usa números romanos con letras mayúsculas
  • type = "i" usa números romanos con letras minúsculas

Lista desordenada

Se puede crear una lista desordenada con la etiqueta <ul> y cada elemento de la lista se puede crear con la etiqueta <li> como se muestra en el siguiente ejemplo:

<ul>
  <li>Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ul>

Esto producirá una lista con viñetas (que es el estilo predeterminado):

  • ít
  • Otro articulo
  • Otro articulo mas

Debe usar ul para mostrar una lista de elementos, donde el orden de los elementos no es importante. Si cambiar el orden de los elementos hace que la lista sea incorrecta, debe usar <ol> .

Lista ordenada

Se puede crear una lista ordenada con la etiqueta <ol> y cada elemento de la lista se puede crear con la etiqueta <li> como en el siguiente ejemplo:

<ol>
  <li>Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

Esto producirá una lista numerada (que es el estilo predeterminado):

  1. ít
  2. Otro articulo
  3. Otro articulo mas

Cambiando manualmente los números.

Hay varias formas de jugar con los números que aparecen en los elementos de la lista en una lista ordenada. La primera forma es establecer un número de inicio, usando el atributo de start . La lista comenzará en este número definido y continuará incrementándose en uno como de costumbre.

<ol start="3">
  <li>Item</li>
  <li>Some Other Item</li>
  <li>Yet Another Item</li>
</ol>

Esto producirá una lista numerada (que es el estilo predeterminado):

  1. ít
  2. Algún otro artículo
  3. Otro articulo mas

También puede establecer explícitamente un determinado elemento de lista en un número específico. Más elementos de la lista después de uno con un valor específico continuarán incrementándose en uno desde el valor de ese elemento de la lista, ignorando donde estaba la lista principal.

<li value="7"></li>

También vale la pena señalar que, al utilizar el atributo de value directamente en un elemento de la lista, puede anular el sistema de numeración existente de una lista ordenada al reiniciar la numeración a un valor inferior. Por lo tanto, si la lista principal ya tenía el valor 7 y se encontró con un elemento de la lista con el valor 4, ese elemento de la lista aún se mostrará como 4 y continuará contando desde ese punto nuevamente.

<ol start="5">
  <li>Item</li>
  <li>Some Other Item</li>
  <li value="4">A Reset Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

Por lo tanto, el ejemplo anterior producirá una lista que sigue el patrón de numeración de 5, 6, 4, 5, 6, comenzando nuevamente en un número inferior al anterior y duplicando el número 6 en la lista.

Nota: Los atributos de start y value solo aceptan un número, incluso si la lista ordenada está configurada para mostrarse como números romanos o letras.

5

Puede revertir la numeración agregando reversed en su elemento ol :

<ol reversed>
  <li>Item</li>
  <li>Some Other Item</li>
  <li value="4">A Reset Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

La numeración inversa es útil si está agregando continuamente a una lista, por ejemplo, con nuevos episodios de podcast o presentaciones, y desea que los elementos más recientes aparezcan primero.


Cambiando el tipo de numeral

Puede cambiar fácilmente el tipo de número que se muestra en el marcador del elemento de lista utilizando el atributo type

<ol type="1|a|A|i|I">
Tipo Descripción Ejemplos
1 Valor por defecto - números decimales 1,2,3,4
a Ordenados alfabéticamente (en minúsculas) a B C D
A Ordenados alfabéticamente (en mayúsculas) A B C D
i Números romanos (minúsculas) i, ii, iii, iv
I Números romanos (mayúsculas) I, II, III, IV

Debe usar ol para mostrar una lista de artículos, donde los artículos han sido ordenados intencionalmente y el orden debe ser enfatizado. Si cambiar el orden de los elementos NO hace que la lista sea incorrecta, debe usar <ul> .

Descripción de la lista

Con el elemento dl se puede crear una lista de descripción (o lista de definiciones , como se llamó antes de HTML5). Consiste en grupos de nombre-valor, donde el nombre se da en el elemento dt , y el valor se da en el elemento dd .

<dl>
  <dt>name 1</dt>
  <dd>value for 1</dd>
  <dt>name 2</dt>
  <dd>value for 2</dd>
</dl>

Demo en vivo

Un grupo nombre-valor puede tener más de un nombre y / o más de un valor (que representan alternativas):

<dl>

  <dt>name 1</dt>
  <dt>name 2</dt>
  <dd>value for 1 and 2</dd>

  <dt>name 3</dt>
  <dd>value for 3</dd>
  <dd>value for 3</dd>

</dl>

Demo en vivo

Listas anidadas

Puede anidar listas para representar subelementos de un elemento de lista.

<ul>
  <li>item 1</li>
  <li>item 2
    <ul>
      <li>sub-item 2.1</li>
      <li>sub-item 2.2</li>
    </ul>
  </li>
  <li>item 3</li>
</ul>
  • Objeto 1
  • item 2
    • subelemento 2.1
    • subelemento 2.2
  • item 3

La lista anidada debe ser un elemento secundario del elemento li .

También puede anidar diferentes tipos de lista:

<ol>
    <li>Hello, list!</li>
    <li>
        <ul>
            <li>Hello, nested list!</li>
        </ul>
    </li>
</ol>


Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow