Qualquer pessoa que utilize a internet tem alguma ideia do que são links HTML, mesmo que não saiba o que é HTML. Afinal, quem nunca clicou em link seja em um blog ou nas redes sociais?
Como já vimos, um site é composto por documentos que são armazenados em uma hospedagem de sites. E os links HTML nada mais são que conexões entre diferentes documentos. Que podem estar na mesma hospedagem de sites ou em diferentes servidores.
Porém, embora os links façam parte do cotidiano dos internautas, existe muita coisa a ser aprendida sobre o que são os links HTML. Desde sua origem até sua estrutura e função.
Ao longo desse texto vamos explicar em detalhes este recurso do HTML e que é tão utilizado na internet, inclusive com dicas para otimizar seus links.
Inclusive, é possível criar links que levam para uma seção dentro da mesma página. Você sabia disso? Não? Então, aproveite para já compartilhar este texto em suas redes sociais e leia até o fim para aprender tudo sobre os links HTML.
Origem dos links HTML
Antes de qualquer coisa, vamos começar com um pouco da história da internet. Afinal, esta também é a história dos links HTML.
Tudo isso remete aos anos 1980, quando o pai da internet Tim Berners-Lee ainda desenvolvia o projeto Enquire. Não vamos nos alongar em muitos detalhes sobre este projeto aqui.
O que nos cabe dizer é que este projeto foi de certa forma uma versão beta do que viria a se tornar a internet, já que ele visava instaurar a comunicação entre um cliente e um servidor.
De fato, nove anos depois surgiu a World Wide Web, popularmente abreviada como “www”. Neste ponto foi que Lee desenvolveu a linguagem de marcação de hipertexto, HTML.
Entretanto, inicialmente o HTML era baseado na linguagem, SGML de onde herdou suas principais tags: title, head, parágrafos etc. Mas com a inclusão de uma tag que mudaria tudo.
Isso mesmo, a tag link, que permitia a conexão entre diferentes páginas. Embora parecesse uma pequena inclusão, foi essa mudança que viabilizou o projeto da internet como conhecemos hoje.
Desde então, links HTML estão por toda parte: nos resultados de pesquisa no Google, neste blog e nas suas redes sociais. Inclusive, são os links um dos pontos principais do ranqueamento no Google.
O que são links HTML
Um link HTML é o que conecta duas páginas da web entre si, estejam eles no mesmo site ou em endereços diferentes. Mais do que isso, também é possível criar links para seções do mesmo documento no formato de um índice.
Estes links podem ser inseridos em formato de texto, nos chamados textos âncoras. Neste caso os links geralmente se apresentam com sua formatação padrão: azul e sublinhado.
Mas eles não se limitam a isso. Links também pode ser inserido em imagens. O principal é que um link sempre deve apontar para um endereço existente.
Caso a url inserida seja invalida, ao clicar no link o usuário irá se deparar com a mensagem do conhecido erro 404.
Outro ponto importante é citar que os links HTML podem ser configurados para se apresentarem com outra formatação além do padrão. Bem como, para abrirem na mesma página ou em uma nova página.
Este último detalhe é especialmente importante de se saber. Afinal, se você deseja que se visitante se mantenha no seu site, não irá configurar um link para abrir na mesma página.
Atributos dos links HTML
Para criar um link HTML antes de tudo precisamos conhecer seus atributos e sua sintaxe. Ou seja, o que compõe o comando de link no HTML.
Os atributos HTML são comandos que devem ser inseridos juntos a tag HTML para que se obtenha o resultado desejado. No caso dos links HTML podemos citar três principais atributos:
- Href
- Target
- Title
Embora esses sejam os três atributos essenciais, existem alguns outros atributos, mas por hora vamos nos ater aos principais.
Href
O atributo href é que define o destino para onde o link irá direcionar. Esse destino pode ser um endereço na internet, no próprio site ou na própria página.
Target
Outro atributo importante é o atributo target. É este atributo que define como o link será aberto.
Isto é, ele deve ser aberto em uma nova aba? Ou na mesma página? Com esse atributo é possível definir os seguintes comandos:
- Abrir o link em uma nova aba: _blank
- Abrir o link na mesma janela: _self
Title
Por fim temos o atributo title. Importante não confundir com a tag de mesmo nome. Dentro da tag de links, o atributo title define um texto que será exibido quando o cursor se move sobre o link.
Um recurso muito útil para inserir informações extras importantes.
Tag de link HTML
Mas de nada adiantam os atributos sem uma tag, certo? Logo, a tag utilizada para inserir links HTML é descrita pelo comando: <a>.
É importante citarmos que dentre os três atributos citados o mais indispensável para o funcionamento correto da tag é o atributo href.
Vamos dar uma olhada na sintaxe básica desse comando agora:
<a href=”https://www.isbrasil.info/hospedagemdesite/”>Hospedagem de Site</a>
O resultado fica assim Hospedagem de Site
Como vimos no exemplo acima, é perfeitamente possível criar um link HTML sem os atributos title e target. Porém, é impossível sem o atributo href.
Vamos explorar um pouco mais das possibilidades dessa tag agora, incluindo os demais atributos e explorando mais do atributo href?
Diferentes formas de aplicar o atributo href
Vamos começar pelo atributo mais essencial da tag de links HTML. Podemos aplicar esse atributo de três formas diferentes.
A primeira é a que chamamos de linkagem externa ou global. Neste caso, o link irá redirecionar para outra página fora do seu site. A sintaxe fica da seguinte forma:
<a href=”https://www.isbrasil.info/hospedagemdesite/”>Hospedagem de Site</a>
A segunda forma de plicar o atributo href é conhecida como linkagem interna. Neste caso, ela redireciona para outro link, mas dentro do seu domínio.
Pode ser outro post de blog ou uma página de contato.
<a href=” Outro Site”>Nome do outro site</a>
Por fim, temos a linkagem local. Este é o tipo mais interessante já que ela redireciona para um elemento dentro da mesma página. Por exemplo, um índice.
<a href=”https://www.isbrasil.info/hospedagemdesite/#índice”>Hospedagem de Site</a>
Aplicando o atributo title
Imagine que você deseja incluir um recado em seu link. Pode ser um aviso, um agradecimento ou qualquer outra mensagem. Como fazer isso?
Se você leu atentamente até aqui sabe que a resposta é o atributo title. Então vamos ver como aplicá-lo dentro de uma tag <a>:
<a href=”https://www.isbrasil.info/hospedagemdesite/” title=”Hospedagem de Site ISBrasil”>Hospedagem de Site</a>
Veja esse resultado: Hospedagem de Site
Com a tag inserida dessa forma, ao passarmos o cursor sobre o texto âncora veremos a seguinte mensagem: Obrigado por acompanhar o blog da ISBrasil!
Aplicando o atributo target
Não seria nada interessante para você que ao clicar em um link em seu site, seu usuário sai da sua página não é mesmo?
A menos é claro, que esse link o leve para outra área do seu site, como um produto, por exemplo. Então, como aplicar essas configurações ao dentro da tag de links HTML?
Veja no exemplo como incluir o comando _blank (abrir em nova aba) e o comando _self (abrir na mesma aba).
<a href=”https://www.isbrasil.info/hospedagemdesite/” target=” _blank”>Hospedagem de Site</a>
<a href=”https://www.isbrasil.info/hospedagemdesite/” target=” _self”>Hospedagem de Site</a>
Veja um exemplo do _blank: Hospedagem de Site
Além desses comandos, existem ainda alguns outros que podem ser estudados de acordo a sua necessidade.
Href: destinos com url e texto
Vamos dar uma atenção extra ao atributo href aqui, afinal ele é essencial. E para tirar máximo proveito deste atributo e da tag <a>, vamos entender um pouco mais sobre urls.
Nós já explicamos o que é url aqui no blog, mas vamos voltar a isso um pouco aqui.
Embora estejamos acostumados com url como um sinônimo para o endereço do site, isso não é todo correto. Como assim?
Bem, a definição genérica de url é que elas são caminhos em forma de texto para algum documento.
Dessa forma, ao explorar um diretório, estamos lidando com um tipo de url. Mas como isso irá influenciar na hora de criar links HTML?
Imagine que você deseje linkar um documento no seu blog. Então, na seção href deverá contar o caminho para o diretório do documento na sua hospedagem de sites.
Veja no exemplo:
<a href=” diretório pai/pasta/documento.pdf =” _blank”>Texto âncora </a>
Download de um arquivo por link HTML
Mas, vamos um pouco além nesse exercício e imaginemos agora que você deseje habilitar uma opção de download para este documento, de forma que ao clicar sobre o link o usuário inicie o download.
Isso também é possível com um atributo que não vimos acima: o atributo de download.
Sim, é possível habilitar o download apenas com o atributo href. Mas a melhor forma de realizar esse procedimento é a inclusão do atributo correto para evitar qualquer tipo de erro.
Além disso, utilizando esse atributo também podemos definir um nome padrão para o documento que será baixado. Veja no exemplo como é feito o processo:
<a href=” endereço de download” download=” nomedoarquivo.extensão”>Texto âncora</a>
A inclusão do atributo de download irá facilitar que ele seja transferido, abolindo o processo de clicar em “salvar como” dentro da página de destino.
Formatação de um link HTML
Os links HTML possuem uma formatação pré-definida para serem apresentados em um navegador: fonte azul e texto sublinhado. Porém você pode querer personalizá-los qualquer razão que seja.
A forma que iremos ensinar aqui é aplicar o comando de limpar o estilo pré-formatado. Para isso inserimos o comando “text-decoration:none”.
Mas também é possível fazer isso utilizando o CSS, como veremos ainda em outro texto. Por enquanto, vamos nos ater ao HTML.
Link base
Quando se possui um site com muitas páginas, é comum que ao longo do tempo algumas sejam excluídas por qualquer motivo que seja. Neste caso, e quanto aos links que redirecionam a esta página?
Eles ficarão quebrados e levaram a página 404, obviamente. A menos que você insira um comando de base link na sua página.
O comando de base link fará com que qualquer link dentro daquela página que redirecione a um endereço que não exista, leve a um novo endereço pré-definido. Este pode ser a sua página inicial, do seu blog ou qualquer outra de sua preferência.
Veja como aplicar o base link:
<head>
<base href=” endereço de redirecionamento”>
</head>
Observe que o base link deve ser incluído no interior do elemento de cabeçalho do seu documento, e não junto a tag de link <a>.
Links em imagens
Um fato interessante sobre o comando da tag de links é que ela não possui nenhuma restrição quanto a ser utilizada em imagens. Ou seja, você pode aplicar a tag e transformar imagens em links.
Essa função pode ser muito útil aplicada em e-commerces, por exemplo. Para habilitar um link em uma imagem, basta inserir a seguinte sintaxe:
<a href="endereço url" target="_blank">
<img width="150" height="150" src="images/nomedoarquivo.jpeg ">
</a>
Enviando e-mail por link HTML
Outra função muito útil da tag <a> é a possibilidade de configurar o envio de um e-mail. Neste caso, ao clicar sobre o link, o usuário é redirecionado para o envio de e-mail.
Essa função é habilitada com o comando mailto inserido dentro do atributo href. Também é possível incluir o assunto ou subject, separado do endereço de e-mail pelo sinal de interrogação.
A sua sintaxe fica da seguinte forma:
<a href="mailto:meunome@exemplo.com?subject=exemplo de assunto" >Texto âncora</a>
E o melhor, é que esta função pode ser adicionada ainda a imagens, como ícones. Isso permite criar um site interativo e dinâmico para os seus usuários.
Texto âncora
Por fim, vamos falar do texto âncora. Embora não existam muitas especificações técnicas quanto a ele, é importante lembrar da sua aplicação na otimização SEO.
Afinal, o Google irá levar em conta o texto âncora e o link inserido enquanto ele varre seu site para indexação. Por isso, não deixe também de estudar sobre a otimização de textos âncoras para SEO.
Conclusão
A esta altura, você com certeza já está apto a criar links HTML em seu site! Então, não deixe de contratar uma boa hospedagem de site e começar a investir no seu negócio! E aprenda mais sobre marketing digital para alavancar suas vendas!
Gostou de nosso post? Compartilhe:
