Elemento ul en HTML

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 contenidoContenido organizacional.
Contenido permitidoElemento de <li> uno o más, y este elemento también puede contener listas <ol><ul> complejos dentro de él .
AcrónimoLas etiquetas de inicio o finalización no se pueden omitir.
Elementos del padreCualquier elemento que acepte contenido normativo.
Interfaz DOMOHTMLUListElement

Soporte de navegadores

ChromeFirefoxEdgeSafariÓpera
SoportadoSoportadoSoportadoSoportadoSoportado

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><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-typedisc, con márgenes ( margin-topmargin-bottom1emmargin-leftmargin-right0), 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;
}