Como usar um href em HTML para adicionar links ao seu site

Um href é usado para incluir links externos e internos em um site. Os valores au­to­ri­za­dos para o atributo HTML href estão cla­ra­mente definidos. Isso inclui links para outros sites e en­ca­mi­nha­mento para endereços de e-mail ou números de telefone.

O que é href e para que ele é usado?

o a href permite que os usuários criem links externos ou internos em um documento HTML. Quando usado cor­re­ta­mente, o atributo href integra-se per­fei­ta­mente a um site e aparece na forma de um hiperlink. Isso permite que os vi­si­tan­tes cliquem e visitem outra página em seu site. O termo href significa “hiper-re­fe­rên­cia” e es­pe­ci­fica o destino do link desejado.

os atributos href oferecem inúmeras vantagens ao seu site. Eles pro­por­ci­o­nam uma estrutura melhor, facilitam a navegação e fornecem in­for­ma­ções adi­ci­o­nais. Os links também podem ser benéficos para SEO. De acordo com o Google, não importa se você usa um URL absoluto, que inclui o nome de domínio, ou um URL relativo sem um nome de domínio anterior.

Para exibir esse vídeo pre­ci­sa­mos usar cookies de terceiros. Você pode acessar e mudar suas con­fi­gu­ra­ções de cookies here.

Qual é a estrutura de um href?

A sintaxe do href é sempre a mesma em HTML e tem a seguinte aparência:

<a href="URL">anchor text</a>

Cada seção cumpre uma função im­por­tante:

• O a introduz o link e indica um texto âncora. Essa tag HTML define o ponto inicial e final do hiperlink.
• O atributo href é usado no texto âncora e define o alvo de salto do res­pec­tivo link. Além de um site interno ou externo, do­cu­men­tos PDF ou imagens também podem ser vin­cu­la­dos.
• O URL do link é colocado entre aspas.
• Isso é seguido pelo texto visível, que é clicável.
• O texto âncora está completo.

Muitas vezes, os links são com­bi­na­dos com o atributo title para definir o título do link, uma descrição al­ter­na­tiva do destino do link. O título do link pode conter in­for­ma­ções adi­ci­o­nais sobre o site vinculado. Ele fica visível no front-end quando você passa o mouse sobre o link sem clicar nele. A definição de títulos de links também é re­co­men­dada como uma medida de SEO. Em HTML, ele tem a seguinte aparência:

<a href="URL" title="Linktitle">anchor text</a>

Que valores o href pode ter?

Os valores para href em HTML são cla­ra­mente definidos para garantir que os links funcionem cor­re­ta­mente. Os valores au­to­ri­za­dos para href são os seguintes:

• Um URL absoluto: Ao usar um href, o URL absoluto é o exemplo clássico. Ele re­di­re­ci­ona di­re­ta­mente para um site externo e contém o nome do domínio, o caminho e (se dis­po­ní­vel) o nome do arquivo. Exemplo: <a href="www.examplesite.com/topic/index.html">Absolute link to the example page</a>
• Um URL relativo: em um URL relativo, você es­pe­ci­fica somente o caminho (o nome do arquivo é opcional). Por esse motivo, os URLs relativos são muito mais curtos do que os absolutos. Exemplo: <a href="/topic/index.html">Relative link to example page</a>
• Link para um elemento: o link direto para um elemento é possível se ele tiver um ID definido. Isso permite vincular in­ter­na­mente di­fe­ren­tes seções do seu site. Exemplo: <a href="#section3">Direct link to an element</a>
• Outros pro­to­co­los: o href também é adequado para outros pro­to­co­los, como o link direto para um endereço de e-mail. Isso funciona via mailto:. Outros pro­to­co­los podem incluir https://, ftp://, ou file:.
• Scripts: scripts, como Ja­vaS­cript, também são valores au­to­ri­za­dos para um href. Exemplo: href="javascript:alert('Do you have any further questions?');">

Cinco exemplos de como usar um href

Você pode usar um href para di­fe­ren­tes fi­na­li­da­des. A seguir, mos­tra­re­mos alguns dos casos de uso mais comuns de href em HTML.

Usar uma imagem como um link

Use o código a seguir para definir uma imagem como um link para uma subpágina:

<a href="https://www.examplesite.com"><img src=" /exampleimage.jpg" alt="image description"></a>

Link para um endereço de e-mail

Use mailto: para vincular um endereço de e-mail:

<a href="mailto:smith@examplesite.com">smith@examplesite.com</a>

O cliente de e-mail do visitante será aberto quando ele clicar no link e o endereço (smith@exam­ple­site.com) será au­to­ma­ti­ca­mente inserido como des­ti­na­tá­rio. Como al­ter­na­tiva, ele também pode copiar e colar o endereço de e-mail no programa ou em outro local.

Link para um número de telefone

Você também pode vincular um número de telefone com um href. Isso é útil se alguém acessar seu site usando um smartphone e quiser entrar em contato com você di­re­ta­mente. O link tem a seguinte aparência:

<a href="tel:+11231234567">0123 1234567</a>

É im­por­tante adicionar um sinal de mais e o código de discagem in­ter­na­ci­o­nal após a re­fe­rên­cia te­lefô­nica. O zero no código de área não está incluído.

Link para Ja­vaS­cript

Você também pode criar um link para o Ja­vaS­cript usando href. O código cor­res­pon­dente é:

<a href="javascript:Example ( )">example</a>

Abrir um link em uma nova guia ou janela

Embora os links sejam úteis, tome cuidado para não enviar seus vi­si­tan­tes a um site externo di­re­ta­mente do seu site. Com isso em mente, é útil que o link seja aberto em uma nova guia ou em uma nova janela. Assim, os usuários per­ma­ne­ce­rão no seu site e poderão consultar in­for­ma­ções adi­ci­o­nais em outro momento. O código para abrir um link em uma nova guia ou janela é o seguinte:

<a href="http://www.example.org" target="_blank">http://www.example.org</a>