Neste artigo, vamos explorar um dos elementos mais fundamentais do HTML: os links. Os links são o que tornam a web “navegável”, permitindo aos usuários clicar e serem levados de uma página para outra.
Vamos mergulhar nos detalhes de como os links funcionam no HTML, o que são âncoras e quais atributos estão disponíveis para uso.
Links HTML
Os links no HTML são definidos pela tag <a>, que significa “âncora”. A tag <a> tem um atributo chamado href que especifica o destino do link. Aqui está um exemplo de um link em HTML:
<a href="https://www.thiagorossi.com.br">Ir para a página HOME</a>
Neste exemplo, “Ir para a página HOME” é o texto que será exibido para o usuário, e “https://www.thiagorossi.com.br” é o URL para onde o usuário será levado quando clicar no link.
Âncoras HTML
Além de ser usada para criar links, a tag <a> também pode ser usada para criar âncoras. Uma âncora é um ponto de destino dentro de um documento HTML, ou seja, dentro da própria página em que o internauta já está navegando. Você pode criar uma âncora adicionando um atributo id à tag <div>, como neste exemplo:
<div id="anchor">Destino da âncora</div>
Depois de criar uma âncora, você pode criar um link para essa âncora usando um URL fragmentado. Um URL fragmentado é um URL que termina com # seguido pelo id da âncora. Aqui está um exemplo de um link para a âncora que criamos acima:
<a href="#section1">Ir para a Seção 1</a>
Quando o usuário clica neste link, o navegador rola a página até a âncora “Destino da âncora”.
Atributos dos Links
Além do atributo href, existem vários outros atributos que você pode usar para controlar o comportamento dos links. Aqui estão alguns dos mais comuns:
Atributo Target
O atributo target especifica onde abrir o URL do link. Por exemplo, você pode usar _blank para abrir o link em uma nova janela ou guia, _self para abrir o link na mesma janela ou guia, _parent para abrir o link na janela ou guia pai, ou _top para abrir o link na janela ou guia de nível superior.
<a href="https://www.thiagorossi.com.br" target="_blank">Acesse a HOME em outra aba</a>
Atributo Download
O atributo download instrui o navegador a baixar o URL do link em vez de navegar para ele. Você pode opcionalmente especificar um valor para o atributo download para definir o nome do arquivo de download.
<a href="https://thiagorossi.com.br/wp-content/uploads/2024/04/wallpaper-HTML5.jpg" download="Wallpaper HTML5">Clique aqui</a> e baixe um papel de parede sobre HTML 5 incrível
Atributo Rel
O atributo rel especifica a relação entre a página atual e o URL do link. Alguns valores comuns para o atributo rel incluem nofollow (instrui os motores de busca a não seguir o link), noopener (impede o novo documento de acessar o documento que contém o link) e noreferrer (impede o novo documento de referenciar o documento que contém o link).
<a href="https://www.thiagorossi.com.br" rel="nofollow">Vai para a HOME, mas o Google não precisa saber!</a>
Conclusão
Em resumo, os links são um componente fundamental do HTML que permitem aos usuários navegar pela web. As âncoras permitem criar pontos de destino dentro de um documento, e os atributos dos links permitem controlar o comportamento dos links.
Compreender como esses elementos funcionam e como usá-los é uma habilidade essencial para qualquer desenvolvedor web.
E para que você continue estudando e evoluindo nada melhor do que um computador com os melhores preços, marcas renomadas e confiança na entrega que só a Amazon oferece. Clique aqui é veja as melhores promoções das melhores marcas de notebooks e com a melhor entrega do mercado!!!
