Atributo HTML href

Ejemplo: en este ejemplo, simplemente redirigimos a la página de geeksforgeeks haciendo clic en un texto.

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>HTML href attribute</title>
  </head>
  <body>
    <h1>
      <a href="https://www.geeksforgeeks.org/">
       GeeksforGeeks
      </a>
    </h1>
    <strong>HTML href Attribute</strong>
  </body>
</html>

Producción:

Atributo HTML href: Se utiliza para especificar la URL del documento. Contiene la dirección completa de la página que solicita el usuario. Se utiliza para vincular o conectar un documento a otro documento.

Etiquetas compatibles:

Atributo HTML <a> href : Se utiliza para especificar la URL de la página a la que se dirige el enlace. Cuando el atributo href no está presente en <a>, el elemento no será un hipervínculo.

Sintaxis:

<a href="URL">

Ejemplo: El siguiente código ilustra el atributo  href en el elemento <a>.

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>HTML href attribute</title>
  </head>
  <body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML a href Attribute</h2>
    <a href="https://ide.geeksforgeeks.org/">
      Click to open in the same tab
    </a>
    <br />
    <a href="https://ide.geeksforgeeks.org/" 
       target="_blank">
      Click to open in a different tab
    </a>
  </body>
</html>

Producción:

Atributo HTML <base> href: El atributo HTML <base> href se utiliza para especificar la URL base para todas las URL relativas de una página.

Sintaxis:

<base href="URL">

Ejemplo: El siguiente código ilustra el href en la etiqueta <base>. 

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>HTML href Attribute</title>
      
    <!-- Declaring the base URL -->
    <base href="geeksforgeeks.org" 
          target="_blank" />
  </head>
  <h2>GeeksforGeeks</h2>
  <h3>HTML base href Attribute</h3>
  
  <body>
    <img 
       src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210908192254/logo2.png"
       width="200"
       height="200" />
  </body>
</html>

Producción:

Atributo HTML <area> href: El atributo <area> href se utiliza para especificar la URL de la página de destino. Cuando el atributo href no está presente en el <area>, un elemento que no será un hipervínculo.

Sintaxis:

<area href="URL">

Ejemplo: El siguiente código ilustra el uso del atributo href en la etiqueta <area>. 

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>HTML href Attribute</title>
  </head>
  <body style="text-align: center">
    <img
      src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165729/area11.png"
      alt="alt_attribute"
      width="300"
      height="119"
      class="aligncenter"
      usemap="#shapemap"/>
  
    <map name="shapemap">
      <!-- area tag contained image. -->
      <area
        shape="poly"
        coords="59, 31, 28, 83, 91, 83"
        href=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165802/area2.png"
        alt="Triangle"/>
  
      <area
        shape="circle"
        coords="155, 56, 26"
        href=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165934/area3.png"
        alt="Circle"/>
  
      <area
        shape="rect"
        coords="224, 30, 276, 82"
        href=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227170021/area4.png"
        alt="Square"/>
    </map>
  </body>
</html>    

Producción:

Atributo HTML <enlace> href: El atributo HTML <enlace> href se utiliza para especificar la URL del documento vinculado. En su mayoría contiene la URL del archivo de hoja de estilo. 

Sintaxis:

<link href = "url">

Ejemplo: El siguiente código ilustra el uso del atributo href en la etiqueta <link>. 

HTML

<<!DOCTYPE html>
<html>
  <head>
    <title>HTML href Attribute</title>
    <link
      id="linkid"
      rel="stylesheet"
      type="text/css"
      href="style.css"
      sizes="16*16"
      hreflang="en-us"/>
  </head>
  <body style="text-align: center">
    <h2>GeeksforGeeks</h2>
    <b>link href Attribute</b>
  </body>
</html>

Producción:

cómo usar el atributo de enlace

Navegadores compatibles:

  • Google Chrome
  • explorador de Internet
  • Firefox
  • Ópera
  • Safari

Publicación traducida automáticamente

Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

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