Ejemplo de Listas Numeradas En HTML

Inicio » HTML » Listas numeradas en HTML

Las listas numeradas, también conocidas como listas ordenadas, son una parte fundamental de la estructura de una página web cuando se desea presentar una serie de elementos en un orden específico. En este artículo, aprenderás cómo crear listas numeradas en HTML y cómo personalizarlas.

¿Qué es una lista numerada en HTML?

Una lista numerada en HTML es una lista ordenada en la que cada elemento está numerado automáticamente según el orden en el que aparece en la lista. Se utiliza la etiqueta <ol> para crear una lista numerada y la etiqueta <li> para agregar elementos a la lista.

Crear una lista numerada en HTML

Aquí tienes un ejemplo básico de cómo crear una lista numerada en HTML. Para ello utilizaremos las etiquetas <ol><li></li></ol>:

<html>
<head>
<title>Listas numeradas en HTML</title>
</head>
<body>
<h1>Ejemplo de lista numerada</h1>
<ol>
<li>Primer elemento</li>
<li>Segundo elemento</li>
<li>Tercer elemento</li>
</ol>
</body>
</html>

Personalizar una lista numerada en HTML

Puedes personalizar la numeración de la lista utilizando el atributo type en la etiqueta <ol>. Los valores posibles para el atributo type incluyen:

  • 1 (números arábigos, por defecto)
  • A (letras mayúsculas)
  • a (letras minúsculas)
  • I (números romanos en mayúsculas)
  • i (números romanos en minúsculas)

Aquí tienes un ejemplo de cómo personalizar la numeración de una lista:

<html>
<head>
<title>Listas numeradas en HTML</title>
</head>
<body>
<h1>Ejemplo de lista numerada con letras mayúsculas</h1>
<ol type="A">
<li>Primer elemento</li>
<li>Segundo elemento</li>
<li>Tercer elemento</li>
</ol>
</body>
</html>

Aplicar estilos CSS a listas numeradas

Para mejorar aún más la apariencia de tus listas numeradas, puedes utilizar CSS. Con CSS, puedes modificar el estilo, color, tamaño y otros aspectos de la lista y sus elementos. A continuación, te mostramos ejemplos de cómo aplicar estilos a las listas numeradas en HTML.

 

Cambiar el tamaño y color de fuente

En este ejemplo cambiamos el color de fuente a rojo y el tamaño a 24 pixeles:

<html>
<head>
<title>Listas numeradas en HTML</title>
<style>
ol.custom-list {
font-size: 24px;
color: red;
}
</style>
</head>
<body>
<h2>Ejemplo de lista numerada con estilos </h2>
<ol class="custom-list">
<li>Primer elemento</li>
<li>Segundo elemento</li>
<li>Tercer elemento</li>
</ol>
</body>
</html>

Poner un ícono a una lista en HTML

En este ejemplo se quita el estilo de lista predeterminado (viñetas) y se agrega un ícono utilizando CSS. La imagen se establece como fondo y se posiciona a la izquierda de cada elemento de la lista. No olvides guardar "icono.png" en la misma carpeta que el HTML.

<html>
<head>
<style>
/* Estilo personalizado para la lista */
ul.custom-bullet {
list-style-type: none; /* Quitar las viñetas predeterminadas */
padding: 0;
margin: 0;
}
/* Estilo personalizado para los elementos de la lista */
ul.custom-bullet li {
padding-left: 30px; /* Espacio para la viñeta personalizada */
background-image: url('icono.png'); /* Ícono como viñeta */
background-repeat: no-repeat; /* Evitar que la imagen se repita */
background-position: 0 5px; /* Posición de la imagen en el elemento */
}
</style>
</head>
<body>
<h2>Lista personalizada con ícono como viñeta</h2>
<ul class="custom-bullet">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
</body>
</html>

Crear una lista horizontal 

Se puede crear listas horizontales con HTML. Para ello se cambia la propiedad de visualización de los elementos de la lista a "inline". Esto hace que los elementos de la lista se muestren uno al lado del otro, en lugar de uno debajo del otro. Aquí el ejemplo:

<html>
<head>
<style>
/* Estilo personalizado para la lista */
ul.horizontal-list {
list-style-type: none; /* Quitar las viñetas predeterminadas */
padding: 0;
margin: 0;
}
/* Estilo personalizado para los elementos de la lista */
ul.horizontal-list li {
display: inline; /* Mostrar elementos en línea (uno al lado del otro) */
margin-right: 15px; /* Espacio a la derecha de cada elemento */
}
</style>
</head>
<body>
<h2>Lista horizontal</h2>
<ul class="horizontal-list">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
</body>
</html>

Cambiar el estilo de los números en una lista

Para cambiar el estilo de los números en una lista en el siguiente ejemplo se establece un contador personalizado llamado "list-counter" y se modifica su estilo para cambiar el tamaño de fuente, el peso y el color de los números.

<html>
<head>
<style>
/* Estilo personalizado para la lista numerada */
ol.custom-numbering {
counter-reset: list-counter; /* Iniciar contador personalizado */
}
/* Estilo personalizado para los elementos de la lista */
ol.custom-numbering li {
list-style-type: none; /* Quitar los números predeterminados */
position: relative; /* Establecer posición relativa para posicionar números personalizados */
padding-left: 30px; /* Espacio para los números personalizados */
}
/* Estilo personalizado para los números */
ol.custom-numbering li:before {
counter-increment: list-counter; /* Incrementar contador personalizado */
content: counter(list-counter) '.'; /* Mostrar contador personalizado seguido de un punto */
position: absolute; /* Posicionar números absolutamente */
left: 0; /* Alinear números a la izquierda */
font-size: 18px; /* Tamaño de fuente de los números */
font-weight: bold; /* Peso de fuente de los números */
color: blue; /* Color de los números */
}
</style>
</head>
<body>
<h2>Lista numerada personalizada</h2>
<ol class="custom-numbering">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
</body>
</html>

 

¿Cómo citar? Pichardo, A. & Del Moral, M. (s.f.). Ejemplo de Listas Numeradas En HTML.Ejemplo de. Recuperado el 26 de Septiembre de 2023 de https://www.ejemplode.com/17-html/31-ejemplo_de_listas_numeradas_en_html.html

Escrito por:
Aziel Pichardo
Ingeniería en Sistemas
Universidad del Estado de Guanajuato
Mauricio del Moral Durán
Mauricio del Moral, fundador y creador de Ejemplo de, es un experto en enseñanza y un apasionado del ámbito educativo desde el año 2007. Ha dedicado una considerable parte de su vida profesional al estudio y al desarrollo de contenidos educativos en formatos digitales de alta calidad. Poseedor de una Licenciatura en Ciencias de la Comunicación, Mauricio es egresado de la prestigiosa Universidad Intercontinental.
Última modificación: 2023-04-18

Últimos 10 comentarios

  1. Amigo quiero colocar esto asi como esta en mi web y no se como? podrias esplicarme? te agradeceria
    Por ricardo 2010-07-13 a las 3:23:53

Deja un comentario


Acepto la política de privacidad.