Incluir enlaces (links) en Html

Incluir enlaces (links) en Html

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>

Si te ha gustado no olvides compartir en redes sociales.

Espero que te haya servido. Cualquier duda deja un comentario. Un saludo

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Translate »
Ir a la barra de herramientas