Listas ordenadas, no ordenadas y de definiciones en HTML y listas anidadas

Listas ordenadas, no ordenadas y de definiciones en HTML y listas anidadas

Print Friendly, PDF & Email
Listas ordenadas, no ordenadas y de definiciones en HTML y listas anidadas
Valora esta entrada
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

listas html ordenadas
Sintaxi de las listas HTML ordenadas.

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

listas html no ordenadas
Sintaxi de las listas HTML no ordenadas.

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

Lista HTML de definiciones
Sintaxi de las listas HTML de definiciones.

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.

Ejemplo bien y mal hecho de lista anidada en html
Ejemplo bien hecho y mal hecho de lista anidada en html

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.

Entradas relacionadas:

Como usar los encabezados h1 a h6 en html
- 193
Una duda frecuente cuando nos iniciamos en el mundo del html es saber cuando debemos usar un h1, un h2, un h3 o hasta un h4. En esta entrada miramos de dar un criterio lógico que pueda servir de ayuda...
Factores que afectan al tiempo de carga de una página web
- 256
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Meta etiquetas en HTML : meta tags
- 479
Las meta etiquetas son un tipo de tags que se escriben en la cabecera de un documento web que aportan información técnica a los motores de búsqueda sobre como deben leer nuestro sitio web. Vemos los t...
Introducción al HTML
- 533
El HTML es un lenguaje de marcado que constituye uno de los pilares de la web. Es un idioma que se caracteriza por etiquetar el contenido de una página web. El HTML nos ayuda a conferir contenido y es...
Ejemplo de creación de página web con capas y migración a HTML5
- 748
El lenguaje de marcas sirve para dotar de estructura y contenido a un documento web. Mediante la etiqueta div veremos un ejemplo de como dotar de estructura a una página web. Y después utilizaremos la...
Etiquetas xmp, pre y code en HTML
- 693
Tratamos las etiquetas que permiten preformatear el texto de un documento web. Como se escriben, para que sirven y sus peculiaridades con un ejemplo práctico. Veréis el código html y el resultado por ...
Anclas html
- 430
Anteriormente hemos visto que es un enlace y como se construye mediante una etiqueta y cuales son los atributos más importantes que lo acompañan. Hoy vamos a ver una de las utilidades más prácticas d...
Etiquetas html para escribir tablas. Olvídate de atributos obsoletos.
- 588
El uso de tablas html es un clásico dentro del mundo web.  Se usan como recurso para introducir datos en un documento web y nunca para maquetar. ¡O así debería ser! Veamos thead, tbody, tfoot, caption...
Enlaces en html: la etiqueta a
- 152
La web sería muy distinta a como la conocemos hoy de no ser por Tim Berners-Lee y la invención en 1989 de la etiqueta enlace. El hipervínculo hizo posible incorporar a documentos estructurados y marca...
Mapas de imagen en html
- 265
Los mapas de imágenes son una funcionalidad HTML para las imágenes muy curiosa que permiten definir diferentes enlaces asociados a distintas zonas de una misma imagen. A pesar de haber caído en desuso...
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.