Etiqueta HTML <ul>
Ejemplo
Una lista HTML desordenada:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La <ul>etiqueta define una lista desordenada (con viñetas).
Use la <ul>etiqueta junto con la etiqueta <li> para crear listas desordenadas.
Sugerencia: use CSS para diseñar listas .
Sugerencia: para listas ordenadas, use la etiqueta <ol> .
Compatibilidad con navegador
| Element | |||||
|---|---|---|---|---|---|
| <ul> | Yes | Yes | Yes | Yes | Yes |
Atributos globales
La <ul>etiqueta también es compatible con los atributos globales en HTML .
Atributos de eventos
La <ul>etiqueta también es compatible con los atributos de eventos en HTML .
Más ejemplos
Ejemplo
Establezca los diferentes tipos de estilo de lista (con CSS):
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ejemplo
Expanda y reduzca la altura de línea en las listas (con CSS):
<ul style="line-height:180%">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul
style="line-height:80%">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ejemplo
Crear una lista dentro de una lista (una lista anidada):
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Ejemplo
Cree una lista anidada más compleja:
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
páginas relacionadas
Tutorial HTML: Listas HTML
Referencia HTML DOM: Objeto Ul
Tutorial de CSS: Estilo de listas
Configuración predeterminada de CSS
La mayoría de los navegadores mostrarán el <ul>elemento con los siguientes valores predeterminados:
Ejemplo
ul {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}