Diferentes listas en html

Como crear listas con lenguaje en HTML

Para crear listas en html deberemos elegir primero si la queremos ordenada, sin ordenar o descriptiva. Para empezar con la etiqueta <ul>...</ul> la crearemos sin ordenar  y con la etiqueta <ol>...</ol> la crearemos ordenada y con la etiqueta <dl>...</dl> descriptiva.

Listas sin ordenar

En las listas sin ordenar, las posiciones de los elementos no es significativo, no importa, dentro de las etiquetas <ul>...</ul> (ul indica unordered list) deberemos escribir la etiqueta <li> por cada elemento de la lista que quieras, un ejemplo de lista sin ordenar sería la siguiente:

<ul>

<li> elemento

<li> elemento

<li> elemento

</ul>

Listas ordenadas

En las listas ordenadas, las posiciones de los elementos se deben resaltar y por ello se crea un orden, se utiliza la etiqueta  <ol>...</ol> (ol indica ordered list) deberemos escribir la etiqueta <li> por cada elemento de la lista que quieras, un ejemplo de lista ordenada sería la siguiente:

<ol>

<li> elemento 1

<li> elemento 2

<li> elemento 3

</ol>

Además, existen diferentes tipos de listas ordenadas, en la etiqueta de apertura podemos escribir: 

<ol type ="A"> (Para que cree la lista con :A, B, C, D, etc)

<ol type ="a"> (Para que cree la lista con :a, b, c, d, etc)

<ol type ="I"> (Para que cree la lista con :I, II, III, IV, etc)

<ol type ="i"> (Para que cree la lista con :i, ii, iii, iv, etc)

Listas de descripción

En las listas descriptivas, en ellas se utiliza la etiqueta  <dl>...</dl> (dl indica description list) y, tras esta se escriben las etiquetas <dt>...</dt> en la que la frase que insertemos se situará más a la izquierda, y la etiqueta <dd>...</dd> que se situará más a la derecha, dando la sensación sin ningún símbolo de que pertenece a la frase con la etiqueta de arriba, por ejemplo:

<dl>

<dt>Trabajos de TICO</dt>

<dd>Escribir un blog</dd>

<dd>Trabajar con HTML</dd>

<dd>Aprobar</dd>

</dl>

Además, podemos incluir listas, dentro de otras, vamos a ver un ejemplo en el cual, hemos creado una lista sin ordenar, en la cual, hemos creado dos listas ordenadas: