Las listas HTML son una herramienta muy útil para presentar información de manera organizada y fácil de leer. En este tutorial, aprenderás cómo crear diferentes tipos de listas y cómo personalizarlas.
Para crear una lista HTML, necesitas usar el elemento <ul> para listas desordenadas, o el elementos <ol> para listas ordenadas. Dentro de estas etiquetas, debes incluir elementos <li> para cada uno de los elementos que quieres incluir en la lista.
Lista desordenadas
Es una lista de elementos que no sigue un orden específico. Por ejemplo:
<ul>
<li>Manzanas</li>
<li>Peras</li>
<li>Plátanos</li>
</ul>Este código creará una lista sin orden con tres elementos: manzanas, peras y plátanos.
Lista ordenadas
Es una lista que sigue un orden numérico o alfabético. Por ejemplo:
<ol>
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
</ol>Este código creará una lista con orden numérico: primero, segundo y tercero.
Lista con imágenes
Si deseas incluir imágenes en tu lista, puedes usar la etiqueta <img> dentro de la etiqueta <li>, por ejemplo:
<ul>
<li><img src="imagen1.jpg">Manzanas</li>
<li><img src="imagen2.jpg">Peras</li>
<li><img src="imagen3.jpg">Plátanos</li>
</ul>Este código creará una lista sin orden con tres elementos: manzanas con una imagen, peras con una imagen y plátanos con una imagen.
Lista anidada
Las listas anidadas son listas dentro de listas. Para crear una lista anidada, simplemente coloca otra etiqueta <ol> u <ul> dentro de una etiqueta . Por ejemplo:
<ul>
<li>Frutas</li>
<ul>
<li>Manzanas</li>
<li>Peras</li>
<li>Plátanos</li>
</ul>
<li>Verduras</li>
<ul>
<li>Lechugas</li>
<li>Tomates</li>
<li>Zanahorias</li>
</ul>
</ul>Este código creará una lista sin orden con dos elementos principales: frutas y verduras. Cada elemento principal tiene una lista anidada con tres elementos.
Estilos CSS para listas
Puedes personalizar tus listas HTML con estilos CSS. Aquí te mostramos algunos ejemplos:
/* Cambiar la viñeta de una lista sin orden */
ul {
list-style-image: url('viñeta.jpg');
}
/* Cambiar el tipo de numeración de una lista con orden */
ol {
list-style-type: upper-roman; /* letras mayúsculas romanas */
}
/* Eliminar los márgenes de una lista */
ul, ol {
margin: 0;
padding: 0;
}
/* Cambiar el color de fondo y borde de una lista anidada */
ul ul {
background-color: #eee;
border: 1px solid #ccc;
margin: 10px 0;
padding: 10px;
}
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- Cascada CSS - agosto 24, 2023
- El objeto Math - agosto 23, 2023
- Diferencia entre null y undefined en JavaScript - agosto 16, 2023
