Las listas son de gran utilidad en HTML, no sólo como elemento organizativo, sino también porque con un poco de CSS podemos crear fácilmente menús de navegación elegantes con ellas.

Existen dos tipos de listas, las listas ordenadas o numeradas y las desordenadas, en las que aparece una viñeta delante de cada elemento.

Listas ordenadas <ol>

Este elemento HTML es útil para numerar cosas.

El siguiente ejemplo muestra una lista ordenada con tres nombres de libros:

<html>
<head>
</head>
<body>
<ol>
<li>SEO curso práctico</li>
<li>Don quijote de La Mancha</li>
<li>La catedral del mar</li>
</ol>
</body>
</html>

La etiqueta es <ol> y su cláusula de cierre es </ol>

En su interior, cada uno de los elementos ordenados se agregan con la etiqueta li, que también tiene cláusula de inicio y fin.

El navegador se ocupa de numerar cada uno de los elementos contenidos en la lista.

Para recordar el nombre de estos elementos HTML:

<ol> de ordened list
<li> de list item

Listas no ordenadas <ul>

Una lista no ordenada no utiliza un número delante de cada elemento, sino una pequeña viñeta.

La forma de crear este tipo de listas es igual a las listas ordenadas.

<html>
<head>
</head>
<body>
<h2>Lenguajes de programación.</h2>
<ul>
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>C#</li>
</ul>
</body>
</html>

Para recordar el nombre de esta etiqueta HTML:

<ul> de unordered list

A continuación uno de los ejemplos anteriores al que se han agregado listas al final: