Ir al contenido principal

Listas ordenadas y listas no ordenadas

En HTML existen 3 tipos de listas: Las listas ordenadas, las listas no ordenadas y las listas de definición.

Se estructuran de la forma siguiente:

Listas ordenadas:
<ol>
<li>Una silla</li>
<li>Una mesa</li>
<li>Una pantalla</li>
</ol>

Listas no ordenadas
<ul>
<li>Una silla</li>
<li>Una mesa</li>
<li>Una pantalla</li>
</ul>

En pantalla, cada lista se ve de la forma siguiente:

  1. Una silla
  2. Una mesa
  3. Una pantalla
  • Una silla
  • Una mesa
  • Una pantalla

Por defecto las listas desordenadas llevan un punto negro y las listas ordenadas un número.
Se puede configurar el formato de las listas cambiando las reglas de estilos.

Configuración de las listas ordenadas:

<ol type="1">Caracteres numéricos</ol>
<ol type="A">Letras en mayúscula</ol>
<ol type="a">Letras en minúscula</ol>
<ol type="I">Números romanos en mayúscula</ol>
<oltype="i">Números romanos en minúscula</ol>

Configuración de las listas no ordenadas:

<ul style="list-style-type:disc">Punto redondo negro</ul>
<ul style="list-style-type:circle">Punto círculo blanco</ul>
<ul style="list-style-type:disc">Punto cuadrado negro</ul>
<ul style="list-style-type:none">Sin punto</ul>

La lista de la compra

Normas importantes

Las listas se pueden anidar y dotarse de otros elementos como imágenes y/o enlaces.

Las listas ordenadas se pueden configurar para empezar a partir de un valor distinto del valor pre-configurado.
En el ejemplo siguiente, haremos que la lista empece a partir del número 24.

  1. Una silla
  2. Una mesa
  3. Una pantalla

Zonas de navegación

Son los elementos de listas que solemos utilizar para configurar zonas de navegación. En este caso cambiamos las reglas de estilo para que la lista se imprima en línea y para que no esté compuesta por puntos.

<!DOCTYPE html>
<html>
<head>
<style>
ul {list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: BLACK;
}
li {float: left;}
li a {display: block;
color: WHITE;
text-align: center;
padding: 20px;
text-decoration: none;
}
li a:hover {background-color: ORANGE;}
</style>
</head>
<body>
<ul>
<li><a href="#inicio"title="Volver al inicio">Inicio</a></li>
<li><a href="#servicios"title="Consultar nuestros servicios">Servicios</a></li>
<li><a href="#contacto"title="Ir a la sección de contacto">Contacto</a></li>
<li><a href="#historia"title="Consultar nuestra historia">Historia</a></li>

Newsletter

Si mandas tu email desde este formulario, te responderé con una oferta de 5% aplicable a tu próximo presupuesto. Más adelante, te enviaré ofertas y noticias acerca de mi actividad.
No spam. Tus datos están protegidos y no compartidos.

imagen Captcha correspondiente a pylos

Por favor, escribir el nombre visible en esta imagen sin tilde, mayúscula, símbolo...

Parte inferior de la sección rellenada por fotos de gente