Tutorial HTML5: Listas ordenadas, desordenadas y de definición

Entrada más reciente Entrada antigua

Hola que tal en esta ocasión vengo con una nueva parte HTML5 y son las lista así que comencemos inspirado y escuchando music  :)

Listas ordenadas

En muchas ocasiones me imagina que haz echo listas ordenadas como por ejemplo en la escuela, trabajo, en casa y esto es muy frecuente digamos que en una receta de cocina cuando se enumeran los pasos para preparar le pastel o cualquier otra
En HTML5 es muy fácil hacer listas y como ya estás aquí y quiero imaginar que llevas todo los tutoriales de HTML5 desde el inicio así que solo voy a poner la tag, su significado, el código de ejemplo y su demostracion:

Ol: etiqueta que indica el inicio de una lista ordenada de varios elementos 

 <ol>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
  <li>Elemento 4</li>
 </ol>

Podemos ver que los elementos que se usa para dividir la listas es con la etiqueta li

Ahora queremos que cambie esos números por letras solo agregamos un atributo a la etiqueta ol

 <ol type='a'>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
  <li>Elemento 4</li>
 </ol>

Y si queremos nuestra lista ordenada en números romanos se logra de la siguiente manera cambiando el a por i

 <ol type='i'>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
  <li>Elemento 4</li>
 </ol>

Es sencillo no?

Continuamos con las 

Listas Desordenadas

Y no es porque se vean mal simplemente se les llama listas desordenadas porque no llevan un orden especifico solo son separadas por líneas veamos cómo van

Ul: etiqueta que indica el inicio de una lista desordenada y que también se separan por li

 <ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
  <li>Elemento 4</li>
 </ul>

Este no se queda atrás y también tiene su atributo para cambiar los separadores y en esta ocasión solo de forma ya sea un punto, cuadrado o círculo;

 <ul type='disc'>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
  <li>Elemento 4</li>
 </ul>

 <ul type='circle'>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
  <li>Elemento 4</li>
 </ul>

 <ul type='square'>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
  <li>Elemento 4</li>
 </ul>

Tampoco es difícil, para acabar tenemos las

Listas por Definición

Y bueno como luego vemos en los diccionarios se ve la palabra y la definición como con sangría en el lado izquierdo

Esto es lo que hace la etiqueta

Dl: etiqueta que indica el comienzo de una lista de definición va acompañada de dt: para la palabra y dd: para la definición de cada elemento de la lista

 <dl>
  <dt>Wpot</dt>
  <dd>El mejor dando cursos</dd>
 </dl>

Y bueno no es tan complicado en la siguiente vamos a ver las listas asi que los espero

Saludos