# Como criar link HTML: Tags e Com a tag `` em HTML, você cria hyperlinks para URLs, diversos tipos de mídia e arquivos. O uso de links internos e externos ajuda a melhorar a navegação, o desempenho de SEO e a experiência geral do usuário. Além da tag ``, você também pode usar a tag `` combinada com outros atributos para configurar seus links. ## O que é link HTML? As tags HTML `` e `` são usadas para conectar recursos internos ou externos a um documento HTML. A tag `` permite adicionar hyperlinks para sites externos ou internos, bem como links para arquivos, documentos e downloads. Já a tag `` é usada para incluir recursos, como folhas de estilo, fontes e ícones, que aprimoram a funcionalidade, usabilidade e navegação de uma página web. ## Qual é a diferença entre as tags `` e ``? Ao criar hyperlinks para outras páginas web ou adicionar recursos externos, é uma abordagem comum usar as tags HTML `` ou ``, dependendo de qual link você deseja definir. Estas são as **diferenças entre as duas tags**: - ``: A tag `` (âncora) é usada para criar hyperlinks para URLs ou diferentes tipos de mídia (como imagens, gráficos e vídeos). Esses links podem apontar para elementos do mesmo site ou recursos externos. - ``: A tag `` é usada principalmente para integrar recursos externos, como folhas de estilo CSS, favicons, documentos ou fontes, a um documento HTML. Ela ajuda a controlar a aparência e o comportamento da página e, com recursos como URLs canônicos e pré-busca (*prefetching*), também pode melhorar seu desempenho. A principal diferença entre as duas opções é que a tag `` é **mais usada para incorporar hyperlinks**, enquanto `` serve para incluir elementos externos, como folhas de estilo. As tags `` também costumam aparecer na seção `` do documento, enquanto as tags `` ficam na seção ``. ## Qual é a sintaxe de um link HTML? Nesta seção, vamos conhecer a sintaxe das tags `` e ``. ### Sintaxe da tag `` em HTML Para usar a tag `` corretamente, você precisa definir alguns elementos adicionais: - `href`: O atributo [HTML href](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/um-href-html/ "Href HTML") define para qual URL o link deve apontar. Você pode escolher entre um URL absoluto ou relativo ou até mesmo criar um link de âncora para informações na mesma página. - **Texto do link ou tag de imagem**: A tag de abertura é seguida pelo texto do link, que é o texto clicável exibido aos usuários na página. Se o link apontar para uma imagem, será preciso usar uma tag de imagem. Outros atributos que podem ser usados com a tag `` incluem: - `target`: Determina como a página será aberta. Por exemplo, use `_blank` para abri-la em uma nova aba ou janela ou `_parent` para abrir uma janela mãe. - `download`: Inicia automaticamente um download quando o usuário clica no link. - `title`: Exibe um título, dica ou descrição ao passar o mouse sobre o link. - `rel`: Define a relação entre a página atual e a página vinculada (por exemplo, `rel=nofollow` informa aos mecanismos de busca para não seguirem o link). **Exemplo:** ```html texto do link ou tag de imagem ``` ### Sintaxe da tag `` em HTML A tag `` em HTML é versátil. Você pode usar diferentes atributos HTML juntamente com a tag `` para obter o resultado desejado. #### Vincular folhas de estilo Se quiser **incluir folhas de estilo CSS externas**, use a sintaxe abaixo: ```html ``` #### Vincular favicons Use a sintaxe a seguir para exibir **pequenos ícones ou imagens (favicons) ao lado dos URLs**: ```html ``` #### Pré-busca Para carregar recursos previamente em segundo plano e **melhorar o desempenho do site**, use esta sintaxe: ```html ``` #### URLs ou tags canônicas Se você tem múltiplos URLs que levam ao mesmo conteúdo e deseja informar aos mecanismos de busca **qual URL deve ser priorizado**, use o seguinte código: ```html ``` #### Vincular URLs alternativos Se você tem **diferentes versões da mesma página** (por exemplo, em diferentes idiomas), você pode vinculá-las assim: ```html ``` Dica Confira o nosso tutorial de HTML para iniciantes para saber mais sobre essa popular linguagem de marcação. ## Por que usar links HTML? Estas são algumas opções de uso das tags de link em HTML: - Melhorar a navegação com menus integrados e barras de navegação - Incorporar e apontar para URLs ou recursos internos ou externos - Efetuar o download de documentos e arquivos - Apontar para páginas internas por meio de links de âncora - Aprimorar a acessibilidade e a otimização para mecanismos de busca - Melhorar o carregamento e o desempenho do site This is a markdown version of: [https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/link-html/](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/link-html/) for AI/LLM consumption.