Listas HTML
En HTML, hay tres tipos de listas: desordenadas, ordenadas y de descripción. Cada una se define usando diferentes etiquetas. Echemos un vistazo.
Listas desordenadas en HTML
Usamos listas desordenadas para agrupar elementos que no tienen un orden numérico. Al cambiar el orden de los elementos de la lista, el significado no cambiará. Para crear una lista desordenada, usamos la etiqueta <ul>. Esta etiqueta viene en pares; el contenido se escribe entre las etiquetas de apertura <ul> y de cierre </ul>.
Cada elemento de una lista desordenada se declara dentro de la etiqueta <li>.
Ejemplo de la etiqueta HTML <ul> para crear una lista desordenada:
Un ejemplo de una lista desordenada|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>An unordered list:</h1>
<ul>
<li>This is a list item</li>
<li>This is another list item</li>
<li>This is one more list item</li>
</ul>
</body>
</html>De forma predeterminada, los elementos de las listas desordenadas se marcan con viñetas (pequeños círculos negros). Sin embargo, el estilo de viñeta predeterminado para los elementos de la lista puede cambiarse usando un atributo type.
El atributo type se usa para cambiar el estilo de viñeta predeterminado de los elementos de la lista. Nota: El atributo type está obsoleto en HTML5. Usa en su lugar la propiedad CSS list-style-type.
Ejemplo de la etiqueta HTML <ul> para crear una lista desordenada, donde los elementos se marcan con viñetas:
Ejemplo de un atributo type para listas HTML
<!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>Resultado
También puedes usar la propiedad CSS list-style-type o list-style-image para especificar el tipo de un elemento de lista.
Ejemplo de la etiqueta HTML <ul> usada con la propiedad CSS list-style-type para crear una lista desordenada:
Ejemplo de una propiedad 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>Listas ordenadas en HTML
La lista ordenada HTML se usa para enumerar elementos que están marcados con números. Comienza con la etiqueta <ol>. Esta etiqueta viene en pares; el contenido se escribe entre las etiquetas de apertura <ol> y de cierre </ol>.
Cada elemento de la lista ordenada comienza con la etiqueta de apertura <li> y termina con la etiqueta de cierre </li>.
Ejemplo de la etiqueta HTML <ol> para crear una lista ordenada:
Ejemplo de una lista ordenada HTML|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>An ordered list:</h1>
<ol>
<li>This is List item number 1</li>
<li>This is List item number 2</li>
<li>This is List item number 3</li>
</ol>
</body>
</html>De forma predeterminada, los elementos de la lista ordenada se marcan con números. Si quieres crear una lista ordenada con letras o números romanos, solo necesitas añadir type="a" o type="I" a la etiqueta <ol>. Nota: El atributo type está obsoleto en HTML5. Usa en su lugar la propiedad CSS list-style-type.
Ejemplo de la etiqueta HTML <ol> para crear una lista ordenada con letras y números romanos:
Ejemplo de diferentes marcas de elementos de lista
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h3>A numbered list:</h3>
<ol>
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>An alphabetized list:</h3>
<ol type="A">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>An alphabetized list (lowercase letters):</h3>
<ol type="a">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>A numbered list (Roman numerals):</h3>
<ol type="I">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>A numbered list (lowercase Roman numerals):</h3>
<ol type="i">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
</body>
</html>Listas de descripción en HTML
Las listas de descripción HTML se usan para emparejar términos con sus descripciones, de forma similar a un diccionario o glosario.
Para crear una lista de descripción, usamos la etiqueta <dl>. Esta etiqueta viene en pares.
En <dl>, usamos las etiquetas <dt> para un término/nombre en una lista de descripción y <dd> para una descripción de un término/nombre en una lista de descripción.
Ejemplo de la etiqueta HTML <dl> para crear una lista de descripción:
Ejemplo de una lista de descripción|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Description Lists:</h1>
<dl>
<dt>Tea</dt>
<dd>hot drink</dd>
<dt>Juice</dt>
<dd>cold drink</dd>
</dl>
</body>
</html>Resultado
Listas anidadas en HTML:
Una lista anidada contiene una lista dentro de otra lista.
Ejemplo de una lista anidada en HTML:
Ejemplo de una lista anidada en HTML:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>A nested HTML list</h2>
<p>A nested list contains a list inside a list.</p>
<ul>
<li>Copybooks</li>
<li>
Books
<ul>
<li>Detective books</li>
<li>Roman books</li>
<li>Fairy tale books</li>
</ul>
</li>
</ul>
</body>
</html>Control del conteo de listas
De forma predeterminada, la enumeración en una lista ordenada comienza en 1. Usa el atributo start para comenzar a contar desde un número específico. También puedes usar el atributo reversed para contar hacia atrás, o el atributo value en un <li> específico para establecer su número manualmente.
Ejemplo de una lista HTML para contar desde un número específico:
Ejemplo de una lista HTML para contar desde un número específico:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>List counting control</h2>
<p>By default, the numeration in an ordered list starts from 1. Use the start attribute to start counting from a specified number.</p>
<ol start="40">
<li>Pen</li>
<li>Pencil</li>
<li>Copybook</li>
</ol>
<ol type="I" start="40">
<li>Pen</li>
<li>Pencil</li>
<li>Copybook</li>
</ol>
</body>
</html>Lista horizontal con CSS
Las listas HTML pueden estilizarse de muchas maneras diferentes con CSS.
Puedes dar estilo a las listas HTML usando diferentes propiedades CSS. Por ejemplo, puedes crear un menú de navegación estilizando la lista horizontalmente.
Ejemplo de una lista horizontal con CSS:
Ejemplo de una lista horizontal con CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
background-color: #F44336;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #981816;
}
</style>
</head>
<body>
<h2>Navigation Menu Example</h2>
<p>
You can style HTML lists using different CSS properties. For example, you can create a navigation menu styling the list horizontally.
</p>
<ul>
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="https://www.w3docs.com/tool/">Tools</a>
</li>
<li>
<a href="https://www.w3docs.com/snippets">Snippets</a>
</li>
<li>
<a href="https://www.w3docs.com/quiz/">Quizzes</a>
</li>
<li>
<a href="https://www.w3docs.com/string-functions/">String Functions</a>
</li>
</ul>
</body>
</html>Práctica
What are the different types of HTML lists as stated in the provided article?