Etiqueta HTML <ul>
La etiqueta HTML <ul> se utiliza para especificar una lista desordenada, que agrupa una colección de elementos sin un orden numérico. Al cambiar el orden de los elementos de la lista, el significado no cambia. Por lo general, los elementos de una lista desordenada se muestran con una viñeta. Puede tener diferentes formas, como un círculo, un punto o un cuadrado.
Cada elemento de una lista desordenada se declara dentro de la <li> etiqueta.
La etiqueta <ul> es un elemento de bloque y ocupa todo el espacio horizontal disponible. Su altura depende del contenido dentro del contenedor. Una lista desordenada se representa típicamente como una lista con viñetas.
La etiqueta <ol> también representa una lista de elementos y crea una lista ordenada. Pero difiere de <ul>, ya que el orden en la etiqueta <ol> es significativo. Por defecto, los elementos de una lista ordenada se muestran con números.
Las etiquetas <ul> y <ol> se pueden anidar tanto como desees. Las listas anidadas pueden alternar entre <ul> y <ol>. Sin embargo, debes tener en cuenta que, en caso de anidar una lista dentro de otra, la lista interna debe colocarse dentro de un elemento <li> de la lista externa. Esto significa que el hijo directo de una lista debe ser un elemento <li>, pero ese elemento <li> puede contener otra lista. Es posible cambiar el marcador de los elementos de la lista con CSS. Sin embargo, el significado semántico expresado por la elección de un tipo de lista no se puede cambiar con CSS.
Sintaxis
La etiqueta <ul> viene en pares. El contenido se escribe entre las etiquetas de apertura (<ul>) y cierre (</ul>).
Ejemplo de la etiqueta HTML <ul>:
Ejemplo de la etiqueta HTML <ul>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</body>
</html>Resultado
Puedes usar el atributo type para cambiar el estilo de viñeta predeterminado para los elementos de la lista. Nota: El atributo type está obsoleto en HTML5. Para el desarrollo web moderno, se recomienda usar CSS list-style-type en su lugar.
Ejemplo de la etiqueta HTML <ul> con el atributo type:
Ejemplo de la etiqueta HTML <ul> con el atributo type
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ul type="circle">
<li>List item </li>
<li>List item</li>
<li>List item</li>
</ul>
<ul type="square">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</body>
</html>También puedes usar la propiedad de CSS list-style-type o list-style-image para definir el tipo de un elemento de la lista.
Ejemplo de la etiqueta HTML <ul> utilizada con la propiedad CSS list-style-type:
Ejemplo de la etiqueta HTML <ul> con la propiedad CSS list-style-type
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Examples of unordered lists:</h2>
<ul style="list-style-type: square">
<li>Cold Drinks</li>
<li>Hot Drinks</li>
<li>Ice-Creams</li>
</ul>
<ul style="list-style-type: disc">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ul>
<ul style="list-style-type: circle">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ul>
</body>
</html>Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| compact | compact | Especifica que la lista debe renderizarse en un estilo compacto. No compatible con HTML 5. |
| type | disc square circle | Establece el tipo de marcador. No compatible con HTML 5. |
La etiqueta <ul> también admite los Atributos globales y los Atributos de eventos.
Cómo dar estilo a una etiqueta HTML <ul>
{
"tag_name": "ul"
}Práctica
¿Cuáles de las siguientes afirmaciones sobre la etiqueta HTML <ul> son verdaderas según el artículo https://www.w3docs.com/learn-html/html-ul-tag.html?