# 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 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? o `a href` permite que os usuários criem links externos ou internos em um documento HTML. Quando usado corretamente, o atributo href integra-se 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](https://www.ionos.com/pt-br/digitalguide/marketing-online/marketing-em-buscadores/glossario-seo-otimizacao-para-mecanismos-de-busca/). 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. [YouTube video](https://www.youtube.com/watch?v=iW5ir8IBtx8)## Qual é a estrutura de um href? A sintaxe do href é sempre a mesma em HTML e tem a seguinte aparência: ```html 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 front-end 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: ```html 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. Exemplo: `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. Exemplo: `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. Exemplo: `Direct link to an element` - **Outros protocolos**: o href também é adequado para outros protocolos, como o link direto 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. Exemplo: `href="javascript:alert('Do you have any further questions?');">` Dica Descubra como incorporar JavaScript em HTML em nosso Digital Guide. ## 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: ```html image description ``` ### Link para um endereço de e-mail Use *mailto*: para vincular um endereço de e-mail: ```html 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, 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ê diretamente. O link tem a seguinte aparência: ```html 0123 1234567 ``` É importante adicionar um sinal de mais e o código de discagem internacional após a referência telefônica. 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 é: ```html example ``` ### Abrir um link em uma nova guia ou janela Embora os links sejam úteis, tome cuidado para não enviar seus visitantes a 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. Assim, os usuários permanecerão no seu site e poderão consultar informações adicionais em outro momento. O código para abrir um link em uma nova guia ou janela é o seguinte: ```html http://www.example.org ``` Dica Crie seu site perfeito em apenas algumas etapas! O [Website Builder](https://www.ionos.com/websites/website-builder "Website Builder da IONOS") da IONOS oferece ferramentas úteis e fáceis de gerenciar, permitindo que você crie facilmente uma presença on-line profissional. Se preferir deixar isso a cargo de nossos especialistas, eles podem assumir o design para você e criar um site de acordo com suas necessidades individuais. Escolha uma solução que atenda às suas necessidades. This is a markdown version of: [https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/um-href-html/](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/um-href-html/) for AI/LLM consumption.