Listas y enlaces

En esta lección aprenderás a ordenar información en forma de lista y a enlazar con otras páginas, dos piezas que aparecen en absolutamente cualquier sitio web.

Una lista con viñetas se escribe con <ul> (unordered list) envolviendo varios <li> (list item). Si quieres numeración automática, cambia <ul> por <ol>. Un enlace se crea con <a href="destino">texto</a>: lo que va en href es la dirección a la que se salta, y lo que va entre las etiquetas es el texto en el que se hace clic.

El código de ejemplo pone un título con <h2>, tres elementos dentro de una lista y, debajo, un enlace a un sitio externo. Prueba a añadir un cuarto <li> con tu lenguaje favorito y a cambiar la dirección del enlace.

Un error frecuente es escribir <li> suelto, fuera de un <ul> o un <ol>: el navegador lo tolera, pero pierde el significado de «esto es una lista» y los lectores de pantalla ya no lo anuncian como tal. Otro descuido típico es olvidar el href, con lo que el enlace deja de ser clicable.

En el trabajo real, los menús de navegación, los índices y los listados de productos son casi siempre una <ul> con enlaces dentro. Dominar estas dos etiquetas ya te permite construir la estructura de navegación de un sitio entero.