El atributo HTML a href explicado con ejemplos

El atributo se refiere a un destino proporcionado por un enlace. La aetiqueta (ancla) está muerta sin el atributo.

Cómo usar la etiqueta

A veces, en su flujo de trabajo, no desea un enlace activo o todavía no conoce el destino del enlace. En este caso, es útil establecer el hrefatributo en "#"para crear un enlace muerto.

El hrefatributo se puede utilizar para vincular a archivos locales o archivos en Internet.

Por ejemplo:

  Href Attribute Example   

Href Attribute Example

The freeCodeCamp Contribution Page shows you how and where you can contribute to freeCodeCamp's community and growth.

El atributo es compatible con todos los navegadores.

Más atributos HTML:

hreflang : Especifica el idioma del recurso vinculado.

target : Especifica el contexto en el que se abrirá el recurso vinculado.

title : Define el título de un enlace, que se muestra al usuario como información sobre herramientas.

Ejemplos

This is a dead link This is a live link to freeCodeCamp more with a href attribute

Anclajes en la página

También es posible establecer un ancla en un lugar determinado de la página. Para hacer esto, primero debe colocar una pestaña en la ubicación de la página con la etiqueta y el atributo necesario "nombre" con la descripción de cualquier palabra clave, así:

No se requiere ninguna descripción entre etiquetas. Después de eso, puede colocar un enlace que conduzca a este ancla en cualquier lugar de la misma página. Para hacer esto, debe usar una etiqueta con el atributo necesario "href" con el símbolo # (sostenido) y la descripción de la palabra clave del ancla, así:

Go to Top

Enlaces de imagen

El también se puede aplicar a las imágenes y otros elementos HTML.

Ejemplo

Algunos ejemplos más de href

This gives a base url for all further urls on the page This is a live link to an external stylesheet

¿Con qué más puedes hacer?

¡Más personalización! Veamos un caso de uso específico:

Un enlace mailto es una especie de hipervínculo ( ) con parámetros especiales que le permite especificar destinatarios adicionales, una línea de asunto y / o un cuerpo de texto.

La sintaxis básica con un destinatario es:

Some text

Agregar un asunto a ese correo:

Si desea agregar un asunto específico a ese correo, tenga cuidado de agregar %20o en +todas partes hay un espacio en la línea de asunto. Una forma sencilla de asegurarse de que esté formateado correctamente es utilizar un decodificador / codificador de URL.

Añadiendo texto al cuerpo:

De manera similar, puede agregar un mensaje específico en la parte del cuerpo del correo electrónico: nuevamente, los espacios deben reemplazarse por %20o +. Después del parámetro de asunto, cualquier parámetro adicional debe estar precedido por&

Ejemplo: digamos que desea que los usuarios envíen un correo electrónico a sus amigos sobre su progreso en Free Code Camp:

Dirección: vacía

Asunto: Buenas noticias

Cuerpo: me estoy convirtiendo en desarrollador

Tu enlace html ahora:

Send mail!

Aquí, dejamos mailto vacío (mailto :?). Esto abrirá el cliente de correo electrónico del usuario y el usuario agregará la dirección del destinatario él mismo.

Agregar más destinatarios:

De la misma manera, puede agregar parámetros CC y BCC. ¡Separe cada dirección con una coma!

Los parámetros adicionales deben ir precedidos de &.

Send mail!

Más información:

MDN: enlaces de correo electrónico