Listas en HTML

La forma en que agrupamos la información que publicamos en internet es cada vez más relevante, gracias a los avances de los principales buscadores, nos posicionamos mejor dependiendo de como utilicemos las virtudes del HTML (ahora HTML5 que llego cargado de nuevas opciones). Entre ellas están las listas que como un clásico ya todos conocen pueden ser desordenadas y ordenadas, pero aquí te enseñare aparte otros detalles que te pueden ayudar en la creación de contenido para tu web.
Listas ordenadas

Como dice su nombre estas listas están ordenadas por números o con letras que predicen su orden tal como las escribes en el código. Para representar estas listas ordenadas debes utilizar la etiqueta <ol> y la etiqueta <li> para cada elemento de la siguiente forma:

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

Obteniendo como resultado lo siguiente (Nota: si utilizas plantilla de diseñador puede variar el resultado por defecto)

1. Texto 1
2. Texto 2
3. Texto 3

Por defecto esta lista comienza desde el número 1, pero puedes indicar con HTML otro valor de comienzo agregando a la primera etiqueta “ol” start=”numero”. El código a agregar seria el siguiente:

<ol start="3">
<li>Texto 1</li>
<li>Texto 2</li>
<li>Texto 3</li>
</ol>

El número que esta entre comillas es el que inicia la lista, obteniendo el siguiente resultado:

3. Texto 1
4. Texto 2
5. Texto 3

Tipos de listas ordenadas

Según como indique al inicio del post estas listas además pueden ser ordenadas con letras. Para representar las diversas listas debes utilizar el atributo type al igual que utilizaste start hace un momento. Los tipos de listas que se pueden utilizar son los siguientes:

• 1 = Lista en decimales
• i = Lista de números romanos en minúsculas
• I = Lista de números romanos en mayúsculas
• a = Lista con letras en minúscula
• A = Lista con letras en mayúsculas

El código para agregar estas listas lo dejo a continuación donde solo debes cambiar lo que esta en azul por cualquiera de los tipos (1, i, I, a o A).

<ol type="I">
  <li>Enero</li>
  <li>Febrero</li>
  <li>Marzo</li>
  <li>Abril</li>
  <li>Mayo</li>
</ol>

Listas ordenadas inversas

Con la llegada del HTML5 se incorporo la opción de generar todas las listas que mostré anteriormente en orden inverso agregando el atributo reversed de la siguiente forma:

<ol type="1" reversed>
<li>Enero</li>
<li>Febrero</li>
<li>Marzo</li>
<li>Abril</li>
<li>Mayo</li>
</ol>

Resultado:

1. Enero
2. Febrero
3. Marzo
4. Abril
5. Mayo

Listas desordenadas

Estas listas son precedidas por alguna viñeta, siendo un circulo pintado por defecto al utilizar la etiqueta <ul>. El código es el siguiente:

<ul>
  <li>Hip Hop</li>
  <li>Jazz</li>
  <li>Blues</li>
  <li>R&B</li>
</ul>

Resultado:

• Hip Hop
• Jazz
• Blues
• R&B

Existen muchas viñetas que puedes utilizar agregando CSS a tu plantilla. A continuación te dejo el código:

<style type=”text/css”>
ul {
  list-style-type: square;
}
</style>

Las viñetas disponibles son:

• disc
• circle
• square
• decimal
• decimal-leading-zero
• lower-roman
• upper-roman
• lower-greek
• lower-latin
• upper-latin
• armenian
• georgian
• lower-alpha
• upper-alpha
• none
• inherit

Listas de definiciones

Este tipo de listas son muy utilizadas en sitios web como diccionarios y para utilizarlas disponemos de 3 elementos que defino a continuación:

• <dl> :Elemento que permite la construcción de la lista
• <dt>: Representa el término a definir
• <dd>: El campo que presenta la definición del término

El código HTML para utilizar estas listas es el siguiente y el resultado es como la lista que acabas de leer arriba:

<dl>
  <dt>Término1</dt>
  <dd>Definición 1</dd>
  <dt>Término 2</dt>
  <dd>Definición 2</dd>
  <dt>Término 3</dt>
  <dd>Definición 3</dd>
</dl>

Listas dentro de una lista

Tal cual como lo indica el titulo es insertar una lista en HTML dentro de otra. Esto es muy utilizado para la creación de menús y es compatible con las listas ordenadas y desordenadas. Te dejo un ejemplo:

<ul>
  <li>Matemática
   <ul>
    <li>Números</li>
    <li>Algebra</li>
    <li>Estadística</li>
   </ul>
  </li>
  <li>Lenguaje
   <ul>
    <li>Redacción</li>
    <li>Lectura</li>
   </ul>
  </li>
  <li>Ciencias
   <ul>
    <li>Física</li>
    <li>Biología</li>
    <li>Química</li>
   </ul>
  </li>
</ul>

Resultado

• Matemática
  • Números
  • Algebra
  • Estadística
• Lenguaje
  • Redacción
  • Lectura
• Ciencias
  • Física
  • Biología
  • Química

Si tienes alguna duda sobre las listas HTML puedes dejar un comentario para ayudarte.

Más del Curso de HTML: 

1. Introducción
2. Enlaces
3. Tablas
4. Listas  (estás aquí) 
5. Imágenes
6. Formularios (solo la arquitectura con HTML)
7. Layout
8. Extra: Atributo HTML LazyLoading Nativo