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

o a href é usado para incluir links externos e internos em um site. Os valores autorizados para o atributo HTML href estão claramente definidos. Isso inclui links para outros sites e encaminhamento para endereços de e-mail ou números de telefone.

O que é href e para que ele é usado?

a href permite que os usuários criem links externos ou internos em um documento HTML. Quando usado corretamente, o atributo href se integra perfeitamente a um site e aparece na forma de um hiperlink. Isso permite que os visitantes cliquem e visitem outra página em seu site. O termo href significa “hiper-referência” e especifica o destino do link desejado.

os atributos href oferecem inúmeras vantagens ao seu site. Eles proporcionam uma estrutura melhor, facilitam a navegação e fornecem informações adicionais. 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.

Qual é a estrutura de um href?

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

anchor text

Cada seção cumpre uma função importante:

• 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 respectivo link ****. Além de um site interno ou externo, documentos PDF ou imagens também podem ser vinculados.
• 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 combinados com o atributo title para definir o título do link, uma descrição alternativa do destino do link. O título do link pode conter informações adicionais sobre o site vinculado. Ele fica visível no frontend quando você passa o mouse sobre o link sem clicar nele. A definição de títulos de links também é recomendada como uma medida de SEO. Em HTML, ele tem a seguinte aparência:

anchor text

Que valores o href pode ter?

Os valores para href em HTML são claramente definidos para garantir que os links funcionem corretamente. Os valores autorizados para href são os seguintes:

• Um URL absoluto: Ao usar um href, o URL absoluto é o exemplo clássico. Ele redireciona diretamente para um site externo e contém o nome do domínio, o caminho e (se disponível) o nome do arquivo. Example: Absolute link to the example page
• Um URL relativo: em um URL relativo, você especifica somente o caminho (o nome do arquivo é opcional). Por esse motivo, os URLs relativos são muito mais curtos do que os absolutos. Example: Relative link to example page
• Link para um elemento: o link direto para um elemento é possível se ele tiver um ID definido. Isso permite vincular internamente diferentes seções do seu site. Example: [Direct link to an element](#section3)
• Outros protocolos: href também é adequado para outros protocolos, como links diretos para um endereço de e-mail. Isso funciona via mailto:. Outros protocolos podem incluir https://, ftp://, ou file:.
• Scripts: scripts, como JavaScript, também são valores autorizados para um href. Example: href="javascript:alert('Do you have any further questions?');">

Cinco exemplos de como usar um href

Você pode usar um href para diferentes finalidades. A seguir, mostraremos 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:

smith@examplesite.com

O cliente de e-mail do visitante será aberto quando ele clicar no link e o endereço (smith@examplesite.com) será automaticamente inserido como destinatário. Como alternativa, eles também podem 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ê diretamente. O link tem a seguinte aparência:

0123 1234567

É importante adicionar um sinal de adição e o código de discagem internacional após a referência telefônica: tel:. O zero no código de área não está incluído.

Link para JavaScript

Você também pode criar um link para o JavaScript usando href. O código correspondente é:

<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 visitantes para um site externo diretamente do seu site. Com isso em mente, é útil que o link seja aberto em uma nova guia ou em uma nova janela. Os usuários permanecerão no seu site e poderão consultar as informações adicionais em outro momento. O código para abrir um link em uma nova guia ou janela é semelhante a este:

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