<a>Los enlaces se definen con la etiqueta <a>.
A esta etiqueta se le puede añadir un atributo href que indica la URL a la que enlaza.
Este es un ejemplo de un enlace a Google:
<a href="https://www.google.com">Google</a>
También puedes añadir enlaces a otros documentos HTML en tu proyecto, indicando la ruta relativa al archivo. Por ejemplo:
<a href="about.html">Acerca de</a>
targetEl atributo target se usa para especificar dónde abrir el enlace.
Los valores posibles son _blank, _self, _parent, _top.
Por ejemplo, para abrir el enlace en una nueva pestaña:
<a href="https://www.google.com" target="_blank">Google</a>
| Valor | Descripción |
|---|---|
| _blank | Abre el enlace en una nueva pestaña o ventana |
| _self | Abre el enlace en la misma ventana o pestaña |
| _parent | Abre el enlace en la ventana padre |
| _top | Abre el enlace en ventana completa |
También puedes enlazar a secciones de la misma página, para ello,
en el elemento al que quieras que lleve el enlace, debes añadirle un atributo llamado id.
Por ejemplo:
<h2 id="section1">Sección 1</h2>
<p>Contenido de la sección 1</p>
<h2 id="section2">Sección 2</h2>
<a href="#section1">Ir a la sección 1</a>
Tendría el siguiente resultado:
(Para que se vea bien en el ejemplo el funcionamiento del enlace, voy a añadir un contenido más largo a la sección 1)
lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede.
Para enlazar a una sección en concreto de otra página, debes añadir un # seguido del id de la sección.
Por ejemplo, si tienes una página llamada about.html con una sección con el id section1, el enlace sería:
<a href="about.html#section1">Ir a la sección 1 de la página about</a>
Esto te llevaría a la sección 1 de la página about.html.
En el siguiente capítulo aprenderemos a utilizar botones en HTML.