La etiqueta <ul> se usa para crear una lista desordenada. Se utiliza para hacer una lista en aquellas situaciones en las que el orden de los elementos de la lista no es significativo. Por otro lado, la etiqueta <ol> es para crear una lista ordenada. Como su nombre lo indica, se utiliza en aquellas situaciones en las que los elementos de la lista se mantienen ordenados. Cada lista tiene uno o más elementos de lista que se representan mediante la etiqueta <li> .
En este artículo, aprenderemos sobre el uso de las etiquetas <ul> y <ol> al crear la lista en el documento HTML.
Lista desordenada de HTML: la etiqueta <ul> se usa para crear una lista desordenada/con viñetas en el documento HTML. Se utiliza para agrupar elementos de información particular donde el orden no es importante como la carta de menú de un restaurante, características de un producto, etc.
La etiqueta <ul> es una etiqueta emparejada, por lo que debe tener etiquetas de inicio <ul> y cierre</ul>. Los elementos de la lista se marcan con la etiqueta <li>, que es una etiqueta vacía/no emparejada, es decir, cerrar la etiqueta </li> es opcional. Estos son elementos de bloque, por lo que el salto de línea se inserta automáticamente debajo y encima de las etiquetas.
Sintaxis:
<ul type="disc">
<li> List element1 </li>
<li> List element2 </li>
...
</ul>
Valores de atributos:
- disco: el disco sólido aparece antes del elemento de la lista
- círculo: aparece un círculo vacío antes del elemento de la lista
- cuadrado: el cuadrado sólido aparece antes del elemento de la lista
- ninguno: aparecerá la nota
Nota: Si no ha especificado ningún atributo de tipo, de forma predeterminada, aparece un disco sólido antes de los elementos de la lista.
Ejemplo 1: Este es un ejemplo simple que ilustrará la lista en forma desordenada.
HTML
<!DOCTYPE html> <html> <head> <title>Unordered List</title> </head> <body> <h2>Unordered List</h2> <ul type="circle"> <li>Computers</li> <li>Science</li> <li>Mathematics</li> <li>Languages</li> <li>Social Sciences</li> </ul> </body> </html>
Producción:
Ejemplo 2: Este ejemplo ilustrará el uso de una forma anidada de una lista desordenada.
HTML
<!DOCTYPE html> <html> <head> <title>Nested Unordered List</title> </head> <body> <h2>Nested Unordered List</h2> <ul type="circle"> <li>Programming Languages <ul type="square"> <li>C++</li> <li>Python</li> </ul> <li>Softwares</li> <ul type="square"> <li>System Software</li> <li>Application Software</li> </ul> </ul> </body> </html>
Producción:
Lista ordenada de HTML: el <ol> se utiliza para crear una lista ordenada/numerada en el documento HTML. Se utiliza para agrupar elementos de información en un orden específico, como instrucciones para instalar software de aplicación, etc.
La etiqueta <ol> es una etiqueta emparejada, por lo que debe tener etiquetas de inicio <ol> y cierre</ol>. Los elementos de la lista se marcan con la etiqueta <li>, que es una etiqueta vacía/no emparejada, es decir, cerrar la etiqueta </li> es opcional. Estos son elementos de bloque, por lo que el salto de línea se inserta automáticamente debajo y encima de las etiquetas.
Sintaxis:
<ol type="1">
<li> List element1 </li>
<li> List element2 </li>
...
</ol>
Valores de atributos:
- número: los números aparecerán antes del elemento de la lista, por ejemplo: 1, 2, 3.
- letras minúsculas: las letras minúsculas aparecerán antes del elemento de la lista, por ejemplo: a, b, c.
- Letras mayúsculas : Las letras mayúsculas aparecerán antes del elemento de la lista, por ejemplo: A, B, C.
- Minúsculas romanas: las minúsculas romanas aparecerán antes del elemento de la lista, por ejemplo: i, ii, iii.
- Mayúsculas romanas: Las mayúsculas romanas aparecerán antes del elemento de la lista, por ejemplo: I, II, III.
Nota: si no ha especificado ningún atributo de tipo, los Números aparecerán de forma predeterminada antes de los elementos de la lista especificados con la etiqueta <li> cuando la página web se visualice en un navegador web.
Ejemplo 1: Este es un ejemplo simple que ilustrará la lista en forma ordenada.
HTML
<!DOCTYPE html> <html> <head> <title>Ordered List</title> </head> <body> <h2>Ordered List</h2> <ol type="1" start="2"> <li type="a"> Desktop <li type="A" value="6">Laptop <li type="i">Tablet <li type="I">Mobile Phone </ol> </body> </html>
Producción:
Ejemplo 2: Este ejemplo ilustrará el uso de una forma anidada de una lista ordenada.
HTML
<!DOCTYPE html> <html> <head> <title>Nested Ordered List</title> </head> <body> <h2>Nested Ordered List</h2> <ol> <li> Programming Languages <ol type="A"> <li>Python <li>R </ol> <li> Softwares <ol type="I"> <li>System Software <li>Application Software </ol> </ol> </body> </html>
Producción:
También podemos usar listas ordenadas y desordenadas en la misma lista y crear una lista anidada.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>Nested Ordered and Unordered List</title> </head> <body> <h2>Nested Ordered and Unordered List</h2> <ol> <li> Programming Languages <ol type="i"> <li>Python <li>R </ol> <li> Softwares <ul type="square"> <li>System Software <li>Application Software </ul> </ol> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por annieahujaweb2020 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA