HTML A: criando links em HTML

<a>

Nesta documentação de HTML veremos como a tag <a> pode ser utilizada para criar alguns tipos diferentes de links

Apresentaremos aqui como utilizar a tag <a>.

<a>: na prática

<a>: Atributos

A tag <a> possui alguns atributos que são importantes para o seu funcionamento, veremos aqui alguns dos principais.

href

Esse é o principal atributo da tag <a>. No href é onde colocamos o endereço do link.

Veja:

Ao clicar nesse link o navegador vai carregar a página informada no href.

target

Esse atributo indica para o navegador onde o link deverá ser aberto, se na mesma aba, em outra aba, ou mesmo em uma nova janela do browser.

Quando o atributo target não é utilizado, seu comportamento padrão é abrir o link na aba atual.

Veja alguns exemplos de uso do target nos Códigos 3 e 4.

_self

_self é o valor padrão, e vai abrir o link na página atual. Quando não informamos o target, _self é utilizado.

_blank

_blank é utilizado para abrir links em uma nova aba, porém, o usuário pode mudar o comportamento do navegador para que seja aberto em uma nova janela. _blank é indicado para uso com links externos, assim o usuário acessa o link sem sair da sua página.

Veja o comportamento dos diferentes tipos de target aqui:

See the Pen Target by Eduardo Soares (@eduscxbox) on CodePen.

rel

Esse atributo é muito utilizado para fins de SEO, juntamente do valor nofollow. Também é recomendado utilizar os valores noreferrer e noopener para evitar exploits JavaScript quando estiver utilizando o atributo target="_blank", como vemos nos Códigos 5 e 6.

O atributo rel não altera o comportamento do link.

<a>: Tipos de link

É possível criar diferentes tipos de links com a tag <a>, seja para referenciar uma área específica de uma página, uma página dentro do seu site, ou mesmo um link para outro site. Veja a seguir exemplos dos três tipos de links.

âncora

A âncora é um tipo de link que aponta para uma parte específica da página atualmente carregada. Para criar uma âncora, passamos o id do elemento que queremos navegar para o atributo href. Veja:

See the Pen Untitled by Eduardo Soares (@eduscxbox) on CodePen.

Link interno

Um link interno é um link para outra página dentro do seu próprio site. Para definir um link interno podemos fazer de duas formas, passando a URL completa ou passando o caminho relativo da página que você quer navegar, como mostra o Código 7.

No site da DevMedia, ao clicar no link 'Meus Certificados' no menu, você sai da página atual e vai para a página de certificados. Esse é o comportamento de um link interno, como mostra a Animação 1.

Link externo

Um link externo é aquele que aponta para outro site além do seu. No geral, links externos utilizam o atributo target com valor _blank, para não ser aberto na aba atual.

Em alguns casos também pode ser utilizado o atributo rel com o valor nofollow para motivos de SEO. Veja um exemplo no Código 8.

Ao clicar em um link externo você será enviado para a página informada no href.

See the Pen Link Externo by Eduardo Soares (@eduscxbox) on CodePen.

Através do uso de links você permite que o seu usuário navegue pelas páginas do seu site e acesse conteúdos externos.