{"id":3564,"date":"2023-06-08T17:42:02","date_gmt":"2023-06-08T20:42:02","guid":{"rendered":"https:\/\/www.homehost.com.br\/blog\/?p=3564"},"modified":"2024-01-09T07:06:59","modified_gmt":"2024-01-09T10:06:59","slug":"links-html","status":"publish","type":"post","link":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/","title":{"rendered":"Links HTML: saiba o que s\u00e3o e como utilizar no seu site"},"content":{"rendered":"\n<p>Neste<a name=\"topo\"><\/a> artigo, vamos entender o que s\u00e3o os links HTML, como surgiram, sua sintaxe e algumas formas de aplica\u00e7\u00e3o. Al\u00e9m disso, veremos diversos exemplos pr\u00e1ticos, para voc\u00ea praticar e utilizar em suas p\u00e1ginas HTML.<\/p>\n\n\n\n<p>Este artigo possui os seguintes t\u00f3picos:<\/p>\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_72 ez-toc-wrap-center counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Conte\u00fado<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/#O_que_sao_os_links_HTML\" title=\"O que s\u00e3o os links HTML\">O que s\u00e3o os links HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/#O_surgimento_dos_links_HTML\" title=\"O surgimento dos links HTML\">O surgimento dos links HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/#Como_fazer_um_link_em_HTML\" title=\"Como fazer um link em HTML\">Como fazer um link em HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/#Estilizando_o_link\" title=\"Estilizando o link\">Estilizando o link<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/#O_atributo_href\" title=\"O atributo href\">O atributo href<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/#O_atributo_target\" title=\"O atributo target\">O atributo target<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/#O_atributo_title\" title=\"O atributo title\">O atributo title<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/#Criando_ancoras_com_os_links_HTML\" title=\"Criando \u00e2ncoras com os links HTML\">Criando \u00e2ncoras com os links HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/#Link_HTML_de_e-mail\" title=\"Link HTML de e-mail\">Link HTML de e-mail<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/#Link_HTML_e_o_atributo_download\" title=\"Link HTML e o atributo download\">Link HTML e o atributo download<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/#Base_link\" title=\"Base link\">Base link<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/#Links_HTML_em_imagens\" title=\"Links HTML em imagens\">Links HTML em imagens<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/#Pratique_voce_mesmo\" title=\"Pratique voc\u00ea mesmo\">Pratique voc\u00ea mesmo<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n\n<p><a name=\"topico1\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"O_que_sao_os_links_HTML\"><\/span>O que s\u00e3o os links HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Desde a origem da internet, o que torna a web o que ela \u00e9 hoje \u00e9 justamente a possibilidade de vincular um documento a qualquer outro documento ou recurso. Essa fun\u00e7\u00e3o \u00e9 chamada de hiperlink ou link. Mas afinal de contas, o que s\u00e3o os links HTML?<\/p>\n\n\n\n<p>O link HTML, nada mais \u00e9 que uma fun\u00e7\u00e3o do HTML que permite inserir os hiperlinks em diversos elementos, como textos e imagens. Um link precisa sempre apontar para uma URL (endere\u00e7o) existente em seu site. Caso contr\u00e1rio, voc\u00ea poder\u00e1 obter uma mensagem de <a href=\"https:\/\/www.homehost.com.br\/blog\/internet\/erro-404-not-found\/\" target=\"_blank\" rel=\"noopener noreferrer\">erro 404<\/a>.<\/p>\n\n\n\n<p>A tag link do HTML est\u00e1 presente desde a primeira vers\u00e3o, criada por Tim Berners-Lee.<br> <a name=\"topico2\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"O_surgimento_dos_links_HTML\"><\/span>O surgimento dos links HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Em 1980 o Fisico Brit\u00e2ncio <a href=\"https:\/\/www.internethalloffame.org\/\/official-biography-tim-berners-lee\" target=\"_blank\" rel=\"noopener noreferrer\"><em>Tim Berners-Lee<\/em><\/a> iniciou um projeto baseado no conceito de hipertexto denominado Enquire, desenvolvido inicialmente em linguagem Pascal. Anos mais tarde, Tim Berners-Lee e Robert Cailliau conseguiram implementar a primeira comunica\u00e7\u00e3o entre um cliente e um servidor atrav\u00e9s da internet, o protocolo HTTP. Em 1989, surgia ent\u00e3o a World Wide Web (www).<\/p>\n\n\n\n<p>Em conjunto \u00e0 implementa\u00e7\u00e3o da World Wide Web, Tim Berners-Lee lan\u00e7ou a linguagem HTML (HyperText Markup Language). A vers\u00e3o inicial do HTML foi baseada na SGML, uma linguagem de estrutura\u00e7\u00e3o de documentos. Foi dele que o HTML herdou diversas tags como as de t\u00edtulo (&lt;h1&gt; a &lt;h6&gt;), de par\u00e1grafos (&lt;p&gt;) e a de cabe\u00e7alho (&lt;head&gt;). A maior diferen\u00e7a entre essas duas linguagens de marca\u00e7\u00e3o \u00e9 que o HTML implementava a tag &lt;a&gt;, surgindo ent\u00e3o o link HTML, que permitia a liga\u00e7\u00e3o de uma p\u00e1gina a outra.<\/p>\n\n\n\n<p>Certamente esse conceito de liga\u00e7\u00e3o entre um documento a outro \u00e9 o grande diferencial e principal conceito que define a base do funcionamento da web.<br>\n<a name=\"topico3\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Como_fazer_um_link_em_HTML\"><\/span>Como fazer um link em HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>No HTML, os links s\u00e3o definidos pela tag &lt;a&gt;. Dentro dessa tag inclu\u00edmos o atributo href (Hypertext Reference), que \u00e9 o endere\u00e7o de destino do link. Dentro do conte\u00fado da tag &lt;a&gt;, inclu\u00edmos ent\u00e3o o texto ou elemento que servir\u00e1 como redirecionador, ou seja, que ao ser clicado, executar\u00e1 a fun\u00e7\u00e3o de redirecionar para o endere\u00e7o dentro do atributo href.<\/p>\n\n\n\n<p>Dessa forma, a sintaxe <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/html-basico\/\">b\u00e1sica do HTML<\/a> link \u00e9:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"url\"&gt;Exemplo&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p>A tag &lt;a&gt; pode ser utilizada dentro ou fora dos demais <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tags-html\/\">elementos (tags) do HTML<\/a>, como no exemplo abaixo onde criamos um par\u00e1grafo, e dentro dele, apenas a palavra HomeHost cont\u00e9m um hiperlink para a p\u00e1gina inicial da HomeHost:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p&gt;Seja redirecionado \u00e0 p\u00e1gina da \n&lt;a href=\"https:\/\/www.homehost.com.br\/\"&gt;HomeHost&lt;\/a&gt;&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p>Como resultado, teremos:<\/p>\n\n\n\n<div style=\"padding: 20px 20px 20px 20px; margin-bottom: 10px; background-color: #fafafa; border: 1px solid;\">\n<p>Seja redirecionado a p\u00e1gina da <a href=\"https:\/\/www.homehost.com.br\/\">HomeHost<\/a><\/p>\n<\/div>\n\n\n\n<p>Viu como \u00e9 simples?<br>\n<a name=\"topico4\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Estilizando_o_link\"><\/span>Estilizando o link<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Por padr\u00e3o, a tag &lt;a> traz consigo o <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/estilos-html\/\">estilo<\/a> pr\u00f3prio com o texto sublinhado e na cor azul, para links ainda n\u00e3o visitados, roxo para links visitados e vermelho para links ativos. Por\u00e9m, podemos estilizar diretamente os links atrav\u00e9s do estilos inline ou dentro do elemento &lt;style>. Dessa forma, podemos reiniciar o estilo da tag apenas aplicando &#8220;text-decoration:none&#8221;. Tamb\u00e9m podemos utilizar as pseudo classes do CSS. Voc\u00ea pode aprender mais neste outro artigo sobre a <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/tabela-de-cores-html\/\">tabela de cores HTML<\/a>.<\/p>\n\n\n\n<p>Vejamos um exemplo de estiliza\u00e7\u00e3o CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n\/*Link n\u00e3o visitado *\/\na:link {\n  color: green;\n  text-decoration: none;\n}\n\n\/*Link j\u00e1 visitado*\/\na:visited {\n  color: blue;\n  text-decoration: none;\n}\n\n\/*Quando o mouse passa por cima*\/\na:hover {\n  color: pink;\n  text-decoration: none;\n}\n\n\/*Link ativo\/selecionado*\/\na:active {\n  color: yellow;\n  text-decoration: none;\n}\n&lt;\/style&gt;<\/code><\/pre>\n\n\n\n<p>Tamb\u00e9m poder\u00edamos atribuir um estilo \u00fanico para o elemento &lt;a&gt;, fazendo com que, independente da condi\u00e7\u00e3o, ele receberia o mesmo estilo. Veja o exemplo a seguir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt;\n    a{\n        text-decoration: none;\n        background-color: yellow;\n        color: red;\n        border: 1px solid blue\n        padding:3px 5px;\n    }\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n    &lt;a href=\"\"&gt;\n        Meu link personalizado\n    &lt;\/a&gt;\n&lt;\/body&gt;\n&lt;html&gt;\n<\/code><\/pre>\n\n\n\n<p>Com o c\u00f3digo acima, aplicamos uma borda azul, um fundo na cor amarela e a cor vermelha para o texto. Aplicamos tamb\u00e9m um <em>padding <\/em>(espa\u00e7amento). Portanto, perceba que poder\u00edamos aplicar qualquer propriedade para a tag &lt;a&gt;. Isso acontece pois o mesmo tem como padr\u00e3o de display bloco. Portanto, vejamos resultado do c\u00f3digo acima:<\/p>\n\n\n\n<p><a style=\"text-decoration: none; background-color: yellow; color: red; border: 1px solid blue; padding: 3px 5px;\" href=\"#\">Meu link personalizado<\/a><br>\n<a name=\"topico5\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"O_atributo_href\"><\/span>O atributo href<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Atrav\u00e9s do atributo principal da tag &lt;a&gt;, o href=&#8221;&#8221;, podemos redirecionar o usu\u00e1rio a outro documento ou recurso. Existem tr\u00eas diferentes tipos de links utilizados para redirecionamento dentro do href. Um link pode ser:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>interno: redireciona para um elemento existente dentro da mesma p\u00e1gina;<\/li>\n\n\n\n<li>local: utilizados para p\u00e1ginas contendo o mesmo dom\u00ednio, ou seja, entre p\u00e1ginas do mesmo site;<\/li>\n\n\n\n<li>global: utilizados para p\u00e1ginas de outros dom\u00ednios, ou seja, fora do site.<\/li>\n<\/ul>\n\n\n\n<p>Veja abaixo alguns exemplos de como podem ser utilizados:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">Interno - &lt;a href=\"#contato\"&gt;Contato&lt;\/a&gt;\nRedirecionar\u00e1 ao elemento \u00e2ncora contato.\n\nLocal - &lt;a href=\"..\/pages\/pagina2.html\"&gt;Pagina 2&lt;\/a&gt;\nRedirecionar\u00e1 ao arquivo pagina2.html pertencente \u00e0 pasta pages.\n\nGlobal - &lt;a href=\"http:\/\/www.google.com\/\"&gt;Google&lt;\/a&gt;\nRedirecionar\u00e1 \u00e0 pagina inicial do Google<\/pre>\n\n\n\n<p><a name=\"topico6\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"O_atributo_target\"><\/span>O atributo target<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Al\u00e9m do atributo href, tamb\u00e9m podemos incluir o atributo target dentro da tag &lt;a&gt;. Esse atributo informa ao navegador como o redirecionamento dever\u00e1 ocorrer, abrindo a p\u00e1gina na mesma janela\/aba do navegador ou abrindo uma nova janela\/aba.<\/p>\n\n\n\n<p>Os atributos target s\u00e3o:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>_blank<\/strong>: abre a p\u00e1gina em uma nova janela\/aba;<\/li>\n\n\n\n<li><strong>_self<\/strong>: abre a p\u00e1gina na mesma janela;<\/li>\n\n\n\n<li><strong>_parent<\/strong>: abre a p\u00e1gina na mesma janela do link;<\/li>\n\n\n\n<li><strong>_top<\/strong>: cancela todos os demais <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/iframe-html\/\">frames<\/a> e abre a nova p\u00e1gina no mesmo navegador.<\/li>\n<\/ul>\n\n\n\n<p>Com isso, veja o exemplo a seguir onde ao clicar no link, abrir\u00e1 uma nova aba do navegador com a p\u00e1gina inicial da HomeHost:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"https:\/\/www.homehost.com.br\/\" target=\"_blank\"&gt;\nP\u00e1gina inicial da HomeHost&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p>Nesse exemplo temos o resultado:<\/p>\n\n\n\n<div style=\"padding: 20px 20px 20px 20px; margin-bottom: 10px; background-color: #fafafa; border: 1px solid;\"><a href=\"https:\/\/www.homehost.com.br\/\" target=\"_blank\" rel=\"noopener noreferrer\">P\u00e1gina inicial da HomeHost<\/a><\/div>\n\n\n\n<p><a name=\"topico7\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"O_atributo_title\"><\/span>O atributo title<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>O atributo title permite escrever um texto que aparecer\u00e1 apenas quando passarmos o mouse por cima do link. Portanto, \u00e9 um atributo importante que nos permite digitar&nbsp;informa\u00e7\u00f5es \u00fateis suplementares sobre o link, como o tipo de informa\u00e7\u00e3o que a p\u00e1gina cont\u00e9m ou avisos.<\/p>\n\n\n\n<p>O atributo <code>title<\/code> de um link HTML \u00e9 usado para fornecer um texto descritivo adicional que \u00e9 exibido quando o cursor do mouse \u00e9 colocado sobre o link. Esse texto \u00e9 conhecido como dica de ferramenta (tooltip) e fornece informa\u00e7\u00f5es adicionais sobre o destino do link ou uma descri\u00e7\u00e3o breve do conte\u00fado associado.<\/p>\n\n\n\n<p>Ao definir o atributo <code>title<\/code> em um link HTML, o texto fornecido ser\u00e1 exibido em um pequeno bal\u00e3o ou caixa de dica quando o usu\u00e1rio posicionar o cursor do mouse sobre o link. Essa dica de ferramenta ajuda a fornecer informa\u00e7\u00f5es contextuais ou esclarecer a finalidade do link antes que o usu\u00e1rio clique nele.<\/p>\n\n\n\n<p>Veja um exemplo de como podemos utilizar esse atributo.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"\" title=\"Exemplo de como funciona o atributo title\"&gt;\nConfira como funciona o atributo title!\n&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p>Com esse c\u00f3digo, nosso resultado ser\u00e1:<\/p>\n\n\n\n<div style=\"padding: 20px 20px 20px 20px; margin-bottom: 10px; background-color: #fafafa; border: 1px solid;\"><a title=\"Exemplo de como funciona o atributo title\"> Confira como funciona o atributo title!<\/a><\/div>\n\n\n\n<p>O uso do atributo <code>title<\/code> \u00e9 opcional e nem todos os navegadores exibem a dica de ferramenta por padr\u00e3o. Al\u00e9m disso, o estilo e o comportamento exato da dica de ferramenta podem variar dependendo do navegador e do dispositivo usado. \u00c9 importante considerar que o texto fornecido no atributo <code>title<\/code> deve ser breve e relevante para fornecer um contexto \u00fatil para os usu\u00e1rios.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Criando_ancoras_com_os_links_HTML\"><\/span>Criando \u00e2ncoras com os links HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Conforme o explicado no t\u00f3pico &#8220;O atributo href&#8221;, uma das possibilidades de utilizar o link HTML \u00e9 atrav\u00e9s do redirecionamento interno, processo que tamb\u00e9m \u00e9 conhecido como \u00e2ncora.&nbsp;Para isso, utilizamos a tag &lt;a&gt; para linkar duas se\u00e7\u00f5es da mesma p\u00e1gina. Al\u00e9m disso, podemos nomear a se\u00e7\u00e3o ou atribuir um ID a um determinado elemento, e assim, atrav\u00e9s da \u00e2ncora, acontecer\u00e1 o redirecionamento ao elemento.<\/p>\n\n\n\n<p>Um \u00f3timo exemplo de utiliza\u00e7\u00e3o desse processo, se encontra no in\u00edcio desse artigo: ao clicar nos links de qualquer um dos t\u00f3picos, voc\u00ea \u00e9 redirecionado para essa posi\u00e7\u00e3o! Este recurso tamb\u00e9m \u00e9 muito utilizado dentro de menus de p\u00e1ginas \u00fanicas e landing pages.<\/p>\n\n\n\n<p>Confira o exemplo a seguir, utilizando como base o seguinte c\u00f3digo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h1&gt;Texto 1 de exemplo&lt;a name=\"text1\"&gt;&lt;\/a&gt;&lt;\/h1&gt;\n&lt;h2&gt;Texto 2 de exemplo&lt;a name=\"text2\"&gt;&lt;\/a&gt;&lt;\/h2&gt;\n&lt;h2&gt;Texto 3 de exemplo&lt;a name=\"text3\"&gt;&lt;\/a&gt;&lt;\/h2&gt;<\/code><\/pre>\n\n\n\n<p>Agora vamos criar os links que ao serem clicados realizar\u00e3o o redirecionamento para a posi\u00e7\u00e3o do text1, do text2 e do text3:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"#text1\"&gt;Esse link leva ao Texto 1 de exemplo&lt;\/a&gt;\n&lt;a href=\"#text2\"&gt;Esse link leva ao Texto 2 de exemplo&lt;\/a&gt;\n&lt;a href=\"#text3\"&gt;Esse link leva ao Texto 3 de exemplo&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p>Confira os exemplos que deixamos para voc\u00ea testar essa funcionalidade:<\/p>\n\n\n\n<p><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/#topo\">Redirecionar para o topo do artigo<\/a><br>\n<a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/#final\">Redirecionar para o final do artigo<\/a><br>\n<a name=\"topico9\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Link_HTML_de_e-mail\"><\/span>Link HTML de e-mail<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Atualmente, o HTML \u00e9 capaz de criar um link que redireciona para o envio de e-mail. <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/4-motivos-para-criar-site-com-homehost\/\">Para criar<\/a> essa fun\u00e7\u00e3o, basta colocar dentro do atributo href o &#8220;mailto:&#8221; e separados por uma interroga\u00e7\u00e3o &#8220;?&#8221;, o &#8220;subject=&#8221;. O &#8220;mailto&#8221; deve conter o endere\u00e7o ao qual ser\u00e1 enviado o e-mail, o &#8220;subject=&#8221; nada mais \u00e9 que o assunto. Vejamos ent\u00e3o o exemplo abaixo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p&gt;&lt;a href=\"mailto:exemplo@examplo.com?subject=Assunto\" &gt;Clique aqui&lt;\/a&gt;\npara enviar um e-mail.&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p>O resultado dessa linha de c\u00f3digo \u00e9:<\/p>\n\n\n\n<div style=\"padding: 20px 20px 20px 20px; margin-bottom: 10px; background-color: #fafafa; border: 1px solid;\"><a href=\"mailto:exemplo@examplo.com?subject=Assunto\">Clique aqui<\/a> para enviar um e-mail.<\/div>\n\n\n\n<p>Posteriormente, ainda podemos acrescentar um texto pr\u00e9-estabelecido para o corpo do e-mail. Para isso acrescentamos ao c\u00f3digo o &#8220;body=&#8221;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p&gt;&lt;a href=\"mailto:exemplo@examplo.com?subject=Assunto&amp;body=Digite sua mensagem\"&gt;\nClique aqui&lt;\/a&gt; para enviar um e-mail.&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p>Dessa forma, o resultado fica da seguinte forma:<\/p>\n\n\n\n<div style=\"padding: 20px 20px 20px 20px; margin-bottom: 10px; background-color: #fafafa; border: 1px solid;\"><a href=\"mailto:exemplo@examplo.com?subject=Assunto&amp;body=Digite sua mensagem\">Clique aqui<\/a> para enviar um e-mail.<\/div>\n\n\n\n<p>No exemplo utilizado anteriormente, inclu\u00edmos a fun\u00e7\u00e3o de link em texto, por\u00e9m, essa fun\u00e7\u00e3o \u00e9 muito bem aproveitada quando <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/html-img\/\">inserida em imagens<\/a> ou \u00edcones. Aten\u00e7\u00e3o, para que essa forma de link funcione, \u00e9 necess\u00e1rio ter um <a href=\"https:\/\/www.homehost.com.br\/blog\/contas-de-email\/outlook-configurar-email-iphone-android\/\" target=\"_blank\" rel=\"noopener noreferrer\">software de e-mail configurado<\/a> em seu PC ou celular.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Link_HTML_e_o_atributo_download\"><\/span>Link HTML e o atributo download<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Anteriormente, vimos que \u00e9 poss\u00edvel utilizar dentro do href uma url global, e com isso temos diversas possibilidades de utilizar os hiperlinks. Uma dessas possibilidades \u00e9 utilizar uma url que redirecione para o download de um arquivo. Apenas com o atributo href, o download ir\u00e1 abrir normalmente, por\u00e9m \u00e9 muito recomend\u00e1vel utilizar o atributo download. Com esse atributo, podemos definir um nome padr\u00e3o para o arquivo que ser\u00e1 baixado.<\/p>\n\n\n\n<p>Vejamos o exemplo a seguir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"urldodownload\"\n   download=\"nomedoarquivo.exe\"&gt;\n  Fa\u00e7a o download do Firefox 39 para Windows\n&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p>Separamos o seguinte exemplo para voc\u00eas, o nome do download est\u00e1 como padr\u00e3o exemplo.zip:<br>\n<a href=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2019\/07\/teste.zip\">Fa\u00e7a o download aqui<\/a><br>\n<a name=\"topico11\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Base_link\"><\/span>Base link<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Caso algum link utilizado possua um destino que n\u00e3o existe mais ou n\u00e3o funcione, podemos utilizar um &#8220;base link&#8221; para redirecionar o usu\u00e1rio a um endere\u00e7o espec\u00edfico. Com este objetivo, acrescente a tag &lt;base&gt; no interior do elemento &lt;head&gt; do seu HTML. Posteriormente adicione dentro da tag &lt;base&gt; o atributo href contendo o endere\u00e7o que servir\u00e1 como base link. Dessa forma, caso o link n\u00e3o funcione, o mesmo ser\u00e1 redirecionado para a url contida na tag &lt;base&gt;. Geralmente, utiliza-se a pr\u00f3pria p\u00e1gina inicial como base.<\/p>\n\n\n\n<p>A tag <code>&lt;base&gt;<\/code> em HTML \u00e9 usada para especificar a URL base para todos os links relativos em uma p\u00e1gina da web. Ela define o URL de base que ser\u00e1 usado como ponto de refer\u00eancia para resolver URLs relativos encontrados dentro do documento.<\/p>\n\n\n\n<p>A tag <code>&lt;base&gt;<\/code> \u00e9 colocada dentro da se\u00e7\u00e3o <code>&lt;head&gt;<\/code> do documento HTML e possui um \u00fanico atributo chamado <code>href<\/code>, que define o URL base. Todos os links relativos encontrados na p\u00e1gina ser\u00e3o resolvidos em rela\u00e7\u00e3o a esse URL base.<\/p>\n\n\n\n<p>Vejamos o exemplo a seguir de como inserir um &#8220;base link&#8221; no seu c\u00f3digo HTML:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;head&gt;\n  &lt;base href=\"https:\/\/www.homehost.com.br\/\"&gt;\n&lt;\/head&gt;<\/code><\/pre>\n\n\n\n<p>Assim, caso haja algum link que n\u00e3o funcione no site, o mesmo ser\u00e1 redirecionado para a p\u00e1gina inicial da <a href=\"https:\/\/www.homehost.com.br\/\">HomeHost.<\/a><\/p>\n\n\n\n<p>Certamente, esse elemento \u00e9 um grande diferencial ao site, pois evita que o usu\u00e1rio tenha uma m\u00e1 experi\u00eancia ao clicar num link defeituoso.<\/p>\n\n\n\n<p>A tag <code>&lt;base&gt;<\/code> \u00e9 \u00fatil quando se deseja definir uma URL base padr\u00e3o para todas as refer\u00eancias de links relativos em uma p\u00e1gina da web, evitando a necessidade de especificar a URL completa em cada link relativo.<\/p>\n\n\n\n<p>\u00c9 importante observar que a tag <code>&lt;base&gt;<\/code> deve ser usada com cuidado, pois ela afeta todos os links relativos na p\u00e1gina. Se voc\u00ea deseja ter URLs base diferentes para diferentes partes do seu site, pode ser necess\u00e1rio usar m\u00faltiplas tags <code>&lt;base&gt;<\/code> ou URLs absolutos em vez de URLs relativos nos links.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Links_HTML_em_imagens\"><\/span>Links HTML em imagens<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>J\u00e1 ficou claro que a tag &lt;a&gt; permite sua utiliza\u00e7\u00e3o de diversas formas. Uma das formais mais exploradas atualmente \u00e9 a de links em blocos. Ou seja: uma vez que o elemento &lt;a&gt; n\u00e3o possui nenhum impedimento com a inser\u00e7\u00e3o de blocos dentro dele, podemos inserir um link numa <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-img\/\">imagem em HTML<\/a>, para toda uma &lt;div&gt; ou at\u00e9 mesmo para uma se\u00e7\u00e3o inteira de um site.<\/p>\n\n\n\n<p>Portanto, vejamos o exemplo a seguir, onde vamos inserir uma imagem para um link:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"https:\/\/www.homehost.com.br\/\" target=\"_blank\"&gt;\n    &lt;img width=\"100\" height=\"100\" src=\"images\/homehost.png\"&gt;\n&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p>Teremos como resultado o seguinte:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/www.homehost.com.br\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2016\/05\/homehost-logo.jpg\" alt=\"Link Html Aplicado a Logo da Home Host\" title=\"Link Html Aplicado a Logo da Home Host\" class=\"wp-image-3384\" width=\"288\" height=\"288\" srcset=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2016\/05\/homehost-logo.jpg 288w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2016\/05\/homehost-logo-150x150.jpg 150w, https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2016\/05\/homehost-logo-1x1.jpg 1w\" sizes=\"(max-width: 288px) 100vw, 288px\" \/><\/a><\/figure>\n\n\n\n<div style=\"padding: 20px 20px 20px 20px; margin-bottom: 10px; background-color: #fafafa; border: 1px solid;\"><\/div>\n\n\n\n<p>Perceba que no exemplo anterior, utilizamos os atributos para alterar o tamanho da imagem normalmente. Portanto, a utiliza\u00e7\u00e3o da tag link n\u00e3o impede a estiliza\u00e7\u00e3o do elemento. A mesma regra vale para elementos de blocos, como no exemplo a seguir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"https:\/\/www.homehost.com.br\/\" target=\"_blank\"&gt;\n    &lt;div height=\"100\" style=\"background-color: blue;line-height: 100px;text-align: center;\"&gt;\n        &lt;p style=\"color: white\"&gt;Meu link em uma Div&lt;\/p&gt;\n    &lt;\/div&gt;\n&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p>Da mesma forma que utilizamos atributos de estilo inline normalmente, estamos agora aplicando um link para uma div inteira. Portanto, teste abaixo clicar em qualquer parte do bloco azul:<\/p>\n\n\n\n<div style=\"background-color: blue; line-height: 100px; text-align: center;\">\n<p style=\"color: white;\">Meu link em uma Div<\/p>\n<\/div>\n\n\n\n<p>Al\u00e9m disso, h\u00e1 infinitas possibilidades de estiliza\u00e7\u00e3o e utiliza\u00e7\u00e3o do elemento link.<br>\n<a name=\"topico13\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Pratique_voce_mesmo\"><\/span>Pratique voc\u00ea mesmo<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Ap\u00f3s a leitura e estudo do conte\u00fado desse artigo, recomenda-se praticar! Por isso, fa\u00e7a testes com seus c\u00f3digos, utilizando links externos, internos, locais e globais. Siga as sugest\u00f5es abaixo e certamente voc\u00ea estar\u00e1 apto a utilizar as funcionalidades do link HTML em qualquer situa\u00e7\u00e3o.<\/p>\n\n\n\n<p>Ent\u00e3o, seguem algumas sugest\u00f5es para treinamento:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Comece fazendo o b\u00e1sico, aplicando link a algumas partes do texto;<\/li>\n\n\n\n<li>Estilize o elemento link, tente deix\u00e1-lo com diversos estilos diferentes;<\/li>\n\n\n\n<li>Crie um link que tenha o formato de um bot\u00e3o, com cores de fundo, e cor de fonte diferente do padr\u00e3o;<\/li>\n\n\n\n<li>Criem uma lista &lt;ul&gt; e para cada &lt;li&gt; inclua um link, como um menu;<\/li>\n\n\n\n<li>Fa\u00e7am um menu que levem a determinada parte do site;<\/li>\n\n\n\n<li>Utilize links dentro de imagens;<\/li>\n\n\n\n<li>Utilize link de um download com um nome padr\u00e3o do arquivo;<\/li>\n\n\n\n<li>Experimente utilizar link em uma <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/html-div\/\">div<\/a> completa, estilize e brinque com essa <em>div,<\/em> aproveite para treinar seu CSS.<a name=\"final\"><\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Neste artigo, vamos entender o que s\u00e3o os links HTML, como surgiram, sua sintaxe e algumas formas de aplica\u00e7\u00e3o. Al\u00e9m disso, veremos diversos exemplos pr\u00e1ticos, para voc\u00ea praticar e utilizar em suas p\u00e1ginas HTML. Este artigo possui os seguintes t\u00f3picos: O que s\u00e3o os links HTML Desde a origem da internet, o que torna a [&hellip;]<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_helpful_status":1,"_lmt_disableupdate":"","_lmt_disable":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[6],"tags":[2624,2621,2740,2738,2739],"class_list":["post-3564","post","type-post","status-publish","format-standard","hentry","category-tutoriais","tag-css","tag-html","tag-hyperlink","tag-links","tag-tutorial"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Links HTML: saiba o que s\u00e3o e como utilizar no seu site | Homehost<\/title>\n<meta name=\"description\" content=\"Entenda o que s\u00e3o os links HTML, como surgiram e todas as poss\u00edveis utiliza\u00e7\u00f5es de tags para incluir links dentro da sua p\u00e1gina na web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Links HTML: saiba o que s\u00e3o e como utilizar no seu site | Homehost\" \/>\n<meta property=\"og:description\" content=\"Entenda o que s\u00e3o os links HTML, como surgiram e todas as poss\u00edveis utiliza\u00e7\u00f5es de tags para incluir links dentro da sua p\u00e1gina na web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Homehost\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Homehost\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-08T20:42:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-09T10:06:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2016\/05\/homehost-logo.jpg\" \/>\n<meta name=\"author\" content=\"Rafael Marques\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Homehost\" \/>\n<meta name=\"twitter:site\" content=\"@Homehost\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rafael Marques\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/\",\"name\":\"Links HTML: saiba o que s\u00e3o e como utilizar no seu site | Homehost\",\"isPartOf\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2016\/05\/homehost-logo.jpg\",\"datePublished\":\"2023-06-08T20:42:02+00:00\",\"dateModified\":\"2024-01-09T10:06:59+00:00\",\"author\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e\"},\"description\":\"Entenda o que s\u00e3o os links HTML, como surgiram e todas as poss\u00edveis utiliza\u00e7\u00f5es de tags para incluir links dentro da sua p\u00e1gina na web.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/#primaryimage\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2016\/05\/homehost-logo.jpg\",\"contentUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2016\/05\/homehost-logo.jpg\",\"width\":288,\"height\":288},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/www.homehost.com.br\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Links HTML: saiba o que s\u00e3o e como utilizar no seu site\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#website\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/\",\"name\":\"Homehost\",\"description\":\"Hospedagem De Sites\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.homehost.com.br\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e\",\"name\":\"Rafael Marques\",\"description\":\"Especialista em Desenvolvimento Web e Marketing. \u00c9 apaixonado por tecnologia, empreendedorismo, audiovisual e animais. Em sua carreira, dedica-se ao empreendedorismo, al\u00e9m de atuar como Desenvolvedor Fullstack e redator t\u00e9cnico. Gosta de usar seu tempo livre para assistir a filmes, jogar, escrever, e passar um bom tempo brincando e mimando seus animais de estima\u00e7\u00e3o. Contato: rafael.blog@homehost.com.br\",\"sameAs\":[\"https:\/\/www.instagram.com\/rafamarquesrmb\/\",\"https:\/\/www.linkedin.com\/in\/rafamarquesrmb\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Links HTML: saiba o que s\u00e3o e como utilizar no seu site | Homehost","description":"Entenda o que s\u00e3o os links HTML, como surgiram e todas as poss\u00edveis utiliza\u00e7\u00f5es de tags para incluir links dentro da sua p\u00e1gina na web.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/","og_locale":"pt_BR","og_type":"article","og_title":"Links HTML: saiba o que s\u00e3o e como utilizar no seu site | Homehost","og_description":"Entenda o que s\u00e3o os links HTML, como surgiram e todas as poss\u00edveis utiliza\u00e7\u00f5es de tags para incluir links dentro da sua p\u00e1gina na web.","og_url":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/","og_site_name":"Homehost","article_publisher":"https:\/\/www.facebook.com\/Homehost\/","article_published_time":"2023-06-08T20:42:02+00:00","article_modified_time":"2024-01-09T10:06:59+00:00","og_image":[{"url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2016\/05\/homehost-logo.jpg","type":"","width":"","height":""}],"author":"Rafael Marques","twitter_card":"summary_large_image","twitter_creator":"@Homehost","twitter_site":"@Homehost","twitter_misc":{"Escrito por":"Rafael Marques","Est. tempo de leitura":"12 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/","url":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/","name":"Links HTML: saiba o que s\u00e3o e como utilizar no seu site | Homehost","isPartOf":{"@id":"https:\/\/www.homehost.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/#primaryimage"},"image":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2016\/05\/homehost-logo.jpg","datePublished":"2023-06-08T20:42:02+00:00","dateModified":"2024-01-09T10:06:59+00:00","author":{"@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e"},"description":"Entenda o que s\u00e3o os links HTML, como surgiram e todas as poss\u00edveis utiliza\u00e7\u00f5es de tags para incluir links dentro da sua p\u00e1gina na web.","breadcrumb":{"@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/#primaryimage","url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2016\/05\/homehost-logo.jpg","contentUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2016\/05\/homehost-logo.jpg","width":288,"height":288},{"@type":"BreadcrumbList","@id":"https:\/\/www.homehost.com.br\/blog\/tutoriais\/links-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.homehost.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Links HTML: saiba o que s\u00e3o e como utilizar no seu site"}]},{"@type":"WebSite","@id":"https:\/\/www.homehost.com.br\/blog\/#website","url":"https:\/\/www.homehost.com.br\/blog\/","name":"Homehost","description":"Hospedagem De Sites","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.homehost.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/a2154603d8bc4cfd0c3bda2c09c4017e","name":"Rafael Marques","description":"Especialista em Desenvolvimento Web e Marketing. \u00c9 apaixonado por tecnologia, empreendedorismo, audiovisual e animais. Em sua carreira, dedica-se ao empreendedorismo, al\u00e9m de atuar como Desenvolvedor Fullstack e redator t\u00e9cnico. Gosta de usar seu tempo livre para assistir a filmes, jogar, escrever, e passar um bom tempo brincando e mimando seus animais de estima\u00e7\u00e3o. Contato: rafael.blog@homehost.com.br","sameAs":["https:\/\/www.instagram.com\/rafamarquesrmb\/","https:\/\/www.linkedin.com\/in\/rafamarquesrmb\/"]}]}},"modified_by":"ad_hmhst","jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/3564","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/comments?post=3564"}],"version-history":[{"count":66,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/3564\/revisions"}],"predecessor-version":[{"id":13069,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/3564\/revisions\/13069"}],"wp:attachment":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media?parent=3564"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/categories?post=3564"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/tags?post=3564"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}