TOC

This article is currently in the process of being translated into Spanish (~99% done).

HTML Basics:

Lists

De vez en cuando, una lista puede ser útil. Puedes usar una lista para mostrar ingredientes de una receta o como una tabla de contenidos para tu documento. HTML contiene dos tipos de listas - listas en orden y desorden.

Una lista en la cual el orden no importa (en desorden) comienza con la etiqueta inicial <ul> (abreviación en ingles de una lista en desorden) y cada ítem o punto de la lista es rodeada por la etiqueta <li> (li se refiere al ítem em o punto en la lista)

<ul>
	<li>List item no. 1</li>
	<li>List item no. 2</li>
	<li>List item no. 3</li>
</ul>

Este marcador de HTML resulta en una lista en desorden que luce así:

  • ítem o punto de lista No. 1
  • ítem o punto de lista No. 2
  • ítem o punto de lista No. 3

En general, las listas en desorden tienen círculos negros como su marcador de cada ítem. Puedes cambiar como el marcador del ítem se ve por medio de CSS.

La lista en orden lice así:

  1. Primer ítem o punto de lista
  2. Segundo ítem o punto de lista
  3. Tercer ítem o punto de lista

En mes de usar la etiqueta <ul>, se usa la etiqueta <ol> (abreviación en ingles para una lista en orden)

<ol>
	<li>List item no. 1</li>
	<li>List item no. 2</li>
	<li>List item no. 3</li>
</ol>

Excepto por las obvias razones por las cuales uno debe de usar una lista en orden (cuando se quiere que este en orden), muchos diseñadores de web usan la lista para crear sus menús de navegación ya que muchas veces es un conjunto de enlaces relacionados. Usar una lista como un marcador de tu navegación también significa que aun si las modificaciones de diseño de CSS fallan, los enlaces estarán semánticamente relacionados.

Lo que has aprendido

  • Hay dos tipos diferentes de listas - listas en orden y listas en desorden
  • La etiqueta para una lista en orden es <ol>
  • La etiqueta para una lista en desorden es <ul>
  • Cada ítem o punto de la lista es marcado con el elemento <li>
  • El elemento de lista en la obvia eleccíon cuando quieras crear tu navegación
This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!