
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 propiedadlist-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; }
- Introducción al Lenguaje de Programación HTML
- Elemento HTML
- Elemento base en HTML
- Elemento head en HTML
- Elemento link en HTML
- Elemento meta en HTML
- Elemento style en HTML
- Elemento title en HTML
- Elemento body en HTML
- Elemento address en HTML
- Elemento article en HTML
- Elemento aside en HTML
- Elemento footer en HTML
- Elementos h1 al h6 en HTML
- Elemento header en HTML
- Elemento section en HTML
- Elemento blockquote en HTML
- Elemento nav en HTML
- Elemento dd en HTML
- Elemento div en HTML
- Elemento dl en HTML
- Elemento dt en HTML
- Elemento figcaption en HTML
- Elemento figure en HTML
- Elemento hr en HTML
- Elemento li en HTML
- Elemento main en HTML
- Resumen General de Listas en HTML
- Elemento ol en HTML
- Elemento p en HTML
- Descripción de las Etiquetas HTML
- Qué son los Atributos HTML
- Elemento ul en HTML
- Elemento a en HTML
- Elemento pre en HTML
- El Texto en HTML
- Elemento abbr en HTML
- Elemento b en HTML
- Elemento bdi en HTML
- Elemento bdo en HTML
- Elemento br en HTML
- Elemento cite en HTML