#05 Listas y enlaces#05 Listas y enlaces

Listas sin orden: <ul>

Cuando el orden de las cosas no importa, como en la lista de la compra, usa una lista sin orden (unordered list). Cada elemento va en un <li> (list item):

1
2
3
4
5
6

El navegador pone una viñeta delante de cada elemento. Con CSS podrás cambiarla o quitarla.

Listas ordenadas: <ol>

Cuando el orden sí importa (pasos, clasificaciones, instrucciones), usa una lista ordenada (ordered list). El navegador numera solo:

1
2
3
4
5
6
7

<ol> tiene algunos atributos útiles:

• start="5" empieza a contar desde 5.
• reversed cuenta hacia atrás (ideal para un «top 10»).
• type="a" usa letras; type="I", números romanos.

Listas dentro de listas

Dentro de un <li> puedes meter otra lista completa. Así se hacen índices y menús con submenús:

1
2
3
4
5
6
7
8
9
10
11
12
13

Enlaces: <a>

Los enlaces son lo que convierte un montón de páginas en una red: la web (telaraña, en inglés). Se hacen con el elemento <a> (de anchor, ancla) y su atributo href:

<a href="https://developer.mozilla.org/es/">Documentación de MDN</a>

• href dice a dónde lleva.
• El contenido es el texto en el que se hace clic.

1
2
3

Además de páginas web, un enlace puede abrir el correo (mailto:) o llamar por teléfono desde el móvil (tel:).

Abrir en una pestaña nueva

Con target="_blank", el enlace se abre en otra pestaña:

<a href="https://es.wikipedia.org" target="_blank">Wikipedia</a>

Escribe buenos textos de enlace

El texto del enlace debe decir a dónde lleva, aunque se lea solo:

• ❌ «Para ver los precios, haz clic aquí».
• ✅ «Consulta nuestros precios».

Las personas que usan lectores de pantalla a menudo escuchan la lista de enlaces de la página sin el texto de alrededor. Una lista de diez «aquí» no sirve de nada.

Rutas: cómo decir dónde está algo

El valor de href es una ruta (o URL). Hay dos tipos.

Rutas absolutas

La dirección completa, con https:// y el dominio. Se usan para ir a otras webs:

<a href="https://es.wikipedia.org/wiki/HTML">HTML en Wikipedia</a>

Rutas relativas

La dirección desde la carpeta del archivo en el que estás. Se usan para ir a tus propias páginas. Imagina esta carpeta de proyecto:

mi-web/
├── index.html
├── contacto.html
└── blog/
    ├── index.html
    └── primer-post.html

Enlaces dentro de la misma página

Puedes saltar a cualquier parte de una página larga. Primero ponle un id (un nombre único) al elemento de destino, y luego enlaza con # + ese nombre:

1
2
3
4
5
6
7
8
9
10
11

El id debe ser único en la página: no puede haber dos elementos con el mismo.

Errores típicos

• Poner texto o <p> directamente dentro de <ul>, sin <li>.
• Escribir los números a mano en una lista en lugar de usar <ol>.
• Olvidar https:// en enlaces a otras webs: href="www.google.com" se interpreta como un archivo de tu carpeta.
• Usar rutas de tu ordenador, como C:\Users\ana\web\contacto.html. En cuanto subas la web dejarán de funcionar. Usa rutas relativas.
• Enlaces que dicen «aquí» o «clic». Describe el destino.
• Escribir href="precios" en lugar de href="#precios" para ir a una sección.

Ejercicios

Ejercicio 1: tus películas favoritas (fácil)

Haz un <h2> «Mi top 3 de películas» y una lista ordenada con tres películas. Después, haz que cuente hacia atrás (3, 2, 1).

1

<h2>Mi top 3 de películas</h2>
<ol reversed>
  <li>El viaje de Chihiro</li>
  <li>Regreso al futuro</li>
  <li>Coco</li>
</ol>

Ejercicio 2: arregla la lista (fácil)

Esta lista anidada tiene dos errores. Encuéntralos y corrígelos.

1
2
3
4
5
6
7
8

<ul>
  <li>Europa
    <ul>
      <li>España</li>
      <li>Portugal</li>
    </ul>
  </li>
  <li>Asia</li>
</ul>

Ejercicio 3: menú de navegación (medio)

Crea un menú con una lista sin orden de tres enlaces: «Inicio» a index.html, «Blog» a blog/index.html y «MDN» a https://developer.mozilla.org/es/ (este último en una pestaña nueva).

1

<ul>
  <li><a href="index.html">Inicio</a></li>
  <li><a href="blog/index.html">Blog</a></li>
  <li><a href="https://developer.mozilla.org/es/" target="_blank">MDN</a></li>
</ul>

Ejercicio 4: rutas (reto)

Con la carpeta de abajo, escribe el href para ir: a) de index.html a foto.html; b) de foto.html a index.html; c) de foto.html a contacto.html.

mi-web/
├── index.html
├── contacto.html
└── galeria/
    └── foto.html

Ficha resumen

• <ul> = lista sin orden (viñetas). <ol> = lista ordenada (números). Cada elemento, en un <li>.
• Las sublistas van dentro de un <li>.
• Enlace: <a href="destino">texto que describe el destino</a>.
• Ruta absoluta: https://…, para otras webs. Ruta relativa: pagina.html, carpeta/pagina.html, ../pagina.html, para tus páginas.
• href="#id" salta a un elemento de la misma página. mailto: y tel: abren el correo y el teléfono.
• target="_blank" abre en otra pestaña (con moderación).

Glosario