Elemento ul en HTML

Un elemento html ul representa una lista desordenada de elementos, que generalmente se muestra como una lista con viñetas.

Una lista desordenada <ul> con tres elementos <li>:

< ul > 
  < li > primer elemento </ li > 
  < li > segundo elemento </ li > 
  < li > tercer elemento </ li > 
</ ul >

Etiqueta html ul

Clasificaciones de contenido	Contenido organizacional.
Contenido permitido	Elemento de `<li>` uno o más, y este elemento también puede contener listas `<ol>` o `<ul>` complejos dentro de él .
Acrónimo	Las etiquetas de inicio o finalización no se pueden omitir.
Elementos del padre	Cualquier elemento que acepte contenido normativo.
Interfaz DOMO	`HTMLUListElement`

Soporte de navegadores

Chrome	Firefox	Edge	Safari	Ópera
Soportado	Soportado	Soportado	Soportado	Soportado

Características

En este elemento se pueden utilizar propiedades globales .

`compact`

Esta propiedad booleana determina si una lista debe mostrarse una sobre otra, pero la interpretación de esta propiedad booleana varía según el navegador y no funciona de manera uniforme en todos los navegadores.

Vale la pena señalar que esta propiedad ha quedado obsoleta en HTML5 y no debe usarse, pero el elemento puede formatearse <ul> mediante estilos CSS, y podemos aplicar el mismo efecto que esta propiedad si establecemos un valor line-height en 80%.

`type`

Esta propiedad se utiliza para especificar el tipo de puntos que aparecen antes de los elementos de la lista, a saber:

circle
disc
square

Pero esta propiedad también está obsoleta, así que no la use, solo use una propiedad list-style-type CSS.

Descripción de uso

El elemento se utiliza para <ul> agrupar un grupo de elementos que no tienen orden numérico y cuyo orden no es importante, y suelen colocarse antes de los elementos como puntos, cuadrados, círculos … etc. La forma de estos puntos se puede definir mediante una propiedad list-style-type en CSS.
No hay un límite superior para el anidamiento de listas (listas ordenadas <ol> o desordenadas <ul>).
Componente <ol> y <ul> representan una lista de elementos, y se diferencian entre sí en el orden de los elementos es <ol> importante. Entonces, si está confundido y desea saber cuál de los dos elementos elegir, intente cambiar el orden de los elementos. Si el significado cambia, el elemento debe usarse, y <ol> si sigue siendo el mismo, use <ul>.

Ejemplos del uso html ul

Un ejemplo de una lista desordenada bifurcada. Tenga en cuenta la ubicación de la etiqueta de cierre del elemento <li>:

< ul > 
  < li > primer elemento </ li > 
  < li > segundo elemento   <! - </li> sin etiqueta de cierre ->  
    < ul > 
      < li > primer elemento secundario </ li > 
      < li > segundo elemento secundario    <! - </li> sin etiqueta de cierre ->  
        < ul > 
          < li > primer elemento secundario en el submenú </ li > 
          < li >El segundo subelemento del submenú </li > 
          < li > El tercer elemento hijo en el submenú </ li > 
        </ ul > 
      < li >    <! - </li> Aquí está la etiqueta de cierre -> 
      < li > El tercer elemento hijo </ li > 
    </ ul > 
    <! - <li> Aquí está la etiqueta de cierre -> 
  </ li > 
  < li > tercer elemento </ li > 
</ ul >

Un ejemplo de una lista desordenada en la que se ramifica una lista ordenada <ol>:

< ul > 
  < li > primer elemento </ li > 
  < li > segundo elemento  <! -  </li> sin etiqueta de cierre ->  
    < ol > 
      < li > primer elemento secundario </ li > 
      < li > segundo elemento secundario </ li > 
      < li > tercer elemento hijo </ li > 
    </ ol > 
  <li> aquí está la etiqueta de cierre -> 
  </ li >
  < li > El tercer elemento </ li > 
</ ul >

Formato predeterminado

La mayoría de los navegadores muestran el elemento <ul> con el valor de la propiedad conjunto display en block, la forma de la referencia de la lista list-style-type a disc, con márgenes ( margin-top, margin-bottom a 1em, margin-left y margin-right a 0), la nota izquierda padding-left(o derecha padding-right si el texto es de derecha a izquierda) al conjunto 40px:

ul {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}