Incluir enlaces (links) en Html
En este tutorial aprenderemos cómo incluir enlaces (links) en HTML con la etiqueta <a>. Los enlaces pueden ser internos (hacia otra página de nuestro sitio web), externos (hacio otro sitio web) o enlaces ancla (hacia otra zona de la misma página).Enlace sencillo hacia una página
<a href="tutobasico.com">Tutobasico</a>
Vemos que tiene una etiqueta de apertura y otra de cierre y el atributo «href» que indica la ruta de la imágina, en este caso la página principal de nuestro sitio.
Abrir enlace en una nueva pestaña
Para indicar que un enlace se abra en una nueva pestaña usaremos el atributo «target«.<a href="tutobasico.com" target="_blank">Tutobasico</a>
Enlace nofollow
Podemos también indicarle que el enlace sea nofollow conel atributo «rel», es decir, que no le de autoridad al dominio de destino.<a href="tutobasico.com" target="_blank" rel="nofollow">Tutobasico</a>
Título del enlace
Si añadimos el atributo «title«, al pasar el ratón por encima del enlace se mostrará su contenido<a href="tutobasico.com" target="_blank" title="Enlace a tutobasico.com">Tutobasico</a>
Enlaces ancla
Para crear un enlace ancla (hacia otra zona de la misma página) usaremos el atributo «name» y el símbolo «#«. Veamos un ejemplo de un enlace ancla<body>
<!--Enlaces-->
<a href="#tema1">Ir al tema 1</a>
<a href="#tema2">Ir al tema 2</a>
<h2>Título del libro</h2>
<!--Ancla del tema 1-->
<a name="tema1"></a>
<h2>Tema 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Sapiente consequatur sint iste dolorempque.</p>
<!--Ancla del tema 2-->
<a name="tema2"></a>
<h2>Tema 2</h2>
<p>Voluptate consectetur quam, aperiam reiciendis distinctio natus blanditiis nam amet offica sunt.</p>
<p>Sint iste doloremque molestias at tempora laborum.</p>
</body>
De este modo, al hacer click en el enlace «Ir al tema 1» nos llevará a la zona de la página donde tenemos el ancla «tema1» y si pulsamos en «Ir al tema 2» nos llevará al ancla «tema2«.
Enlaces ancla al id de un elemento
Podemos incluir enlaces ancla sin el atributo «name» si el destino del enlace es un elemento con un id igual al atributo «href» del enlace.<body>
<!--Enlaces-->
<a href="#tema1">Ir al tema 1</a>
<a href="#tema2">Ir al tema 2</a>
<h2>Título del libro</h2>
<!--Div con el id tema1-->
<div id="tema1">
<h2>Tema 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Sapiente consequatur sint iste dolorempque.</p>
</div>
<!--Div con el id tema2-->
<div id="tema2">
<h2>Tema 2</h2>
<p>Voluptate consectetur quam, aperiam reiciendis distinctio natus blanditiis nam amet offica sunt.</p>
<p>Sint iste doloremque molestias at tempora laborum.</p>
</div>
</body>
Más tutoriales de HTML y CSS
Si te ha gustado no olvides compartir en redes sociales.
[addthis tool=»addthis_inline_share_toolbox_6jt6″]Espero que te haya servido. Cualquier duda deja un comentario. Un saludo