Saltar al contenido

Atributo HREF en HTML: Aprende como usarlo

febrero 5, 2020

Sin el atributo HREF la web no sería la web. Este es quizá el atributo más importante de HTML. En este artículo veremos la forma correcta de implementarlo y su importancia en la construcción de cualquier sitio web.

En HTML 5 hay un concepto muy importante, quizá el más importante en la web ya que es lo que le da vida a la gigantesca red de contenido en internet. La web funciona 100% con «href» ya que es donde se ponen los enlaces a otra página y ayuda a conectar cualquier sitio con otro.

En este artículo vamos a hablar sobre el atributo href y cómo usarlo en nuestro código HTML. Para hacer esto tenemos necesariamente que hablar sobre la etiqueta «a» que hace referencia a un enlace saliente y convierte un elemento en algo a lo que puedes darle clic y llevarlo a otro sitio o página web.

Con un ejemplo se explica mejor

Es aburrido solamente explicarlo, así que vamos a hacer un ejemplo en el que verás como funciona, en realidad haremos varios, ya que pueden usarse de diferentes tipos, o mejor dicho a diferentes elementos ya que puedes poner un link a prácticamente cualquier elemento en la pantalla.

Antes que nada, veremos el código para (o mejor dicho: las etiquetas, para aquellos que son unos exquisito de la programación y que dicen que el html no es programación, es únicamente maquetación).

Crear un enlace con HTML (a, href, target)

Empecemos con lo básico. Comenzaremos haciendo un link sencillo que nos lleve a otra página, además veremos el atributo «target» que va a ayudarnos a hacer algo muy interesante. Paremos a ver el código:

<a href="https://www.codigocorrecto.com/html/" target="_blank">
  Link para HTML 5
</a>

Con este código vamos a obtener el siguiente resultado:

Link para HTML 5

Como puedes notas, cuando das clic sobre el texto abres una pestaña nueva en tu navegador y en la pestaña se carga la página https://codigocorrecto.com/html/ que es nuestra página donde colgamos todo el contenido relacionado con HTML, sus etiquetas y sus atributos.

<a></a>

Lo que hace esta etiqueta es convertir algo en un link. Por ejemplo en este caso tenemos las palabras «Link para HTML 5», por lo tanto, este texto es un link. Dentro de las etiquetas <a> </a> podemos poner cualquier clase de elemento, un H1, una imagen, un párrafo entero, etc, prácticamente cualquier cosa.

Dentro de una etiqueta «a» podemos usar algunos atributos, algunos de estos son href y también el atributo target que veremos a continuación.

target

El atributo «target» se utiliza para definir donde se va a abrir el enlace. Tenemos varias opciones, algunas de las opciones son: _blank, _self, _parent, _top, framework.

En esta ocasión usamos _blank para decirle al HTML que debe abrir el enlace en una pestaña nueva. Por lo tanto el navegador interpretará que debe abrir la dirección que se encuentre en href y llevarte ahí.

Si tienes alguna duda puedes dejarlo en los comentarios y con gusto te estaré ayudando. Espero te haya servido.