En anteriores entradas hemos trabajado la estructura básica del documento y nos hemos introducido en el uso y descripción de algunas etiquetas html5 es el momento de hablar sobre las listas html.
Una lista html es una relación de datos agrupados y que tienen una temática en común. Las listas pueden ser ordenadas, no ordenadas y de definiciones.
Veamos en este escrito como es su sintaxis, que atributos las acompañan y como se anidan.
Listas ordenadas en HTML
Las listas ordenadas se indican mediante las etiquetas <ol></ol>
Anidados en su interior cada elemento de la lista se etiqueta mediante <li></li>.
La etiqueta <ol> puede ir acompañada de los atributos type=»1 | A | a | I | i». Como curiosidad, a diferencia de las listas no ordenadas, el atributo type no está deprecated en html5 a diferencia de las listas no ordenadas en que si lo está.
Destaca para este tipo de lista la inclusión en HTML5 del atributo reversed.
El atributo start hace que la numeración empieza en el entero que indiquemos.
Listas no ordenadas en HTML
Las listas no ordenadas se indican mediante las etiquetas <ul></ul>
Anidados en su interior cada elemento de la lista se etiqueta mediante <li></li>.
La etiqueta <ul> puede ir acompañada de los atributos type=»disc | circle | square»
Listas de definiciones en HTML
Usamos las etiquetas <dl>, <dt>, <dd>
- <dl> se emplea para declarar la lista.
- <dt> se emplea para definir el término que definiremos.
- <dd> se emplea para expresar la definición de un término.
Listas anidadas en HTML
Del mismo modo que anidamos etiquetas en HTML también podemos anidar las lista. Un detalle necesario es que una <ol> puede ir anidar <ul> o <dl> y todas las combinaciones posibles más faltaría.
Es muy importante evitar las listas correctamente para evitar futuros errores de validación HTML del código web y para que sea posible aplicar estilos CSS correctamente.
En el ejemplo bien hecho observar que dentro del elemento <li> podemos encontrar encerrada la lista anidada <ol>.
En el ejemplo mal hecho observar que no se encuentra ninguna lista <ol> encerrada dentro de ninguna <li>.
Todo ello queda reflejado gráficamente mediante los rectángulos rojos en los 2 casos.Y hasta aquí la entrada de hoy. Espero que os ayude a aclarar dudas sobre la declaración de las listas ordenadas, no ordenadas y de definiciones y a evitar los errores típicos que todos cometemos en alguna ocasión cuando necesitamos anidarlas.
Ejercicios recomendados
Querido lector,
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
Deja una respuesta