Enlaces en HTML

En un documento HTML los enlaces se pueden definir utilizando el elemento "a".

Elemento "a"

EJEMPLO Si en pantalla se quiere ver el siguiente párrafo, donde hay un enlace a www.abrirllave.com:

Visualización del archivo enlace-sencillo.html en Google Chrome, donde se incluye un enlace sencillo.

El código puede ser ("enlace-sencillo.html"):

<!DOCTYPE html>
<html lang="es-ES">
  <head>
    <meta charset="utf-8">
    <title>Ejemplo de un enlace sencillo</title>
  </head>
  <body>
    <p><a href="http://www.abrirllave.com/">Abrirllave</a> es un sitio web de tutoriales de informática.</p>
  </body>
</html>

Obsérvese que, entre las etiquetas <a> y </a> se ha escrito el texto del enlace mostrado, en este caso Abrirllave. Por otro lado, con el atributo href, se ha indicado la dirección web a la que se accederá al hacer clic en el enlace, es decir, http://www.abrirllave.com/.

Atributo target

EJEMPLO Compruébese en "enlace-sencillo.html" que al hacer clic en el enlace hacia www.abrirllave.com, no se abre una nueva pestaña en el navegador. Para que esto suceda, se puede utilizar el atributo target con el valor "_blank" como se muestra a continuación ("enlace-a-otra-pestana.html"):

<!DOCTYPE html>
<html lang="es-ES">
  <head>
    <meta charset="utf-8">
    <title>Ejemplo de enlace que abre otra pestaña</title>
  </head>
  <body>
    <p><a href="http://www.abrirllave.com/" target="_blank">Abrirllave</a> es un sitio web de tutoriales de informática.</p>
  </body>
</html>

Enlace a otra página del mismo sitio web

EJEMPLO Si en un documento HTML se quiere escribir un enlace a otro documento ubicado en el mismo sitio web, por ejemplo a "otra-pagina.html", visualizándose en pantalla:

Visualización del archivo otra-pagina.html en Google Chrome, donde se ha puesto un enlace a otra página ubicada en el mismo sitio web.

Se podría escribir ("pagina-con-un-enlace-a-otra-pagina.html"):

<!DOCTYPE html>
<html lang="es-ES">
  <head>
    <meta charset="utf-8">
    <title>Ejemplo de enlace a otra página</title>
  </head>
  <body>
    <p>Enlace a <a href="otra-pagina.html">otra página</a> ubicada en el mismo sitio web.</p>
  </body>
</html>

Ejercicio resuelto
Enlaces favoritos