Continuamos explorando los enlaces en HTML, centrándonos en cómo crear enlaces de ancla que nos permiten navegar dentro de la misma página. Para ilustrar esto, hemos preparado un documento web con fragmentos de los tres primeros capítulos del Quijote. La idea es colocar en la parte superior enlaces que nos lleven directamente a cada uno de estos capítulos sin necesidad de cambiar de página.
Para lograrlo, primero debemos crear las anclas en el lugar exacto al que queremos dirigirnos. En HTML, una ancla se crea con la etiqueta a, pero en lugar de usar el atributo href, utilizamos el atributo name. Este atributo recibe un identificador único que servirá para referenciar esa sección. Es importante que este identificador no contenga espacios, acentos ni caracteres especiales que puedan causar problemas con la codificación del texto. Lo ideal es usar letras sin acentos, números y guiones para separar palabras.
Por ejemplo, para el primer capítulo podemos crear un ancla así:
<a name="capitulo-1"></a>
Esta etiqueta no necesita texto ni cierre, por lo que podemos usarla de forma autocontenida. Repetimos este proceso para los capítulos 2 y 3, ubicando cada ancla justo al inicio de la sección correspondiente.
Una vez que tenemos las anclas definidas, creamos los enlaces que nos llevarán a ellas. Estos enlaces sí usan el atributo href, pero en lugar de una URL completa, escribimos el símbolo de almohadilla # seguido del nombre del ancla. Por ejemplo:
<a href="#capitulo-1">Capítulo 1</a>
<a href="#capitulo-2">Capítulo 2</a>
<a href="#capitulo-3">Capítulo 3</a>
Al hacer clic en cualquiera de estos enlaces, el navegador nos desplazará automáticamente a la sección correspondiente dentro de la misma página. Además, el navegador añade el identificador del ancla a la URL en la barra de direcciones, lo que permite enlazar directamente a esa sección desde otras páginas o compartir el enlace con otros usuarios.
Esta funcionalidad también se puede combinar con enlaces a otras páginas. Por ejemplo, si tenemos una página llamada historia.html con un ancla llamada capitulo-1, podemos enlazar directamente a esa sección con:
<a href="historia.html#capitulo-1">Ir al Capítulo 1 en Historia</a>
Al hacer clic, el navegador cargará la página historia.html y se desplazará automáticamente a la sección indicada.
Por último, hemos visto cómo controlar dónde se abre un enlace usando el atributo target. Aunque hay varios valores posibles, nos hemos centrado en dos básicos. El valor target="_self" indica que el enlace se abrirá en la misma ventana o pestaña del navegador, que es el comportamiento por defecto si no especificamos nada. Por otro lado, target="_blank" hace que el enlace se abra en una ventana o pestaña nueva, dependiendo de la configuración del navegador.
Por ejemplo, un enlace que se abre en una ventana nueva sería:
<a href="https://es.wikipedia.org/wiki/Miguel_de_Cervantes" target="_blank">Información sobre Cervantes</a>
Esto es especialmente útil cuando queremos que el usuario no pierda la página actual al visitar un enlace externo.
Aunque existen más valores para el atributo target, estos se abordarán en sesiones posteriores, ya que requieren conceptos más avanzados.
Con estas herramientas, podemos crear páginas web más navegables y controlar mejor la experiencia del usuario al interactuar con los enlaces.