Trabalhando com a tag âncora no HTML | Blog da TreinaWeb [  ](https://www.treinaweb.com.br "TreinaWeb Cursos")
[ Cursos ](https://www.treinaweb.com.br/cursos) [ Cursos ](javascript:) [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs)
[ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end)
[ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end)
[ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile)
[ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados)
[ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing)
[ IA ](https://www.treinaweb.com.br/categoria/ia)
[ E mais ](https://www.treinaweb.com.br/categoria/e-mais)
[ Infra ](https://www.treinaweb.com.br/categoria/infra)
[ Ver todos ](https://www.treinaweb.com.br/cursos)
[Todos os cursos](https://www.treinaweb.com.br/cursos) [Formações](https://www.treinaweb.com.br/formacoes) [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) [Direto ao ponto](https://www.treinaweb.com.br/direto-ao-ponto) [Quanto custa?](https://www.treinaweb.com.br/planos) [Vantagens](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) [Artigos](https://www.treinaweb.com.br/blog) [Login](https://www.treinaweb.com.br/login) [ Matricule-se ](https://www.treinaweb.com.br/checkout/pagamento/plano/anual)
O que você quer aprender? Tudo Cursos Formações Direto ao ponto Artigos
Sugestões:- [ CSS ](https://www.treinaweb.com.br/blog/posts?q=css)
- [ Oracle ](https://www.treinaweb.com.br/blog/posts?q=oracle)
- [ Rails ](https://www.treinaweb.com.br/blog/posts?q=rails)
- [ Python ](https://www.treinaweb.com.br/blog/posts?q=python)
- [ Mobile ](https://www.treinaweb.com.br/blog/posts?q=mobile)
- [ Lógica ](https://www.treinaweb.com.br/blog/posts?q=logica)
- [ Angular ](https://www.treinaweb.com.br/blog/posts?q=angular)
- [ Flutter ](https://www.treinaweb.com.br/blog/posts?q=flutter)
- [ React ](https://www.treinaweb.com.br/blog/posts?q=react)
- [ Laravel ](https://www.treinaweb.com.br/blog/posts?q=laravel)
- [ Banco de Dados ](https://www.treinaweb.com.br/blog/posts?q=banco-de-dados)
- [ Django ](https://www.treinaweb.com.br/blog/posts?q=django)
- [ Flask ](https://www.treinaweb.com.br/blog/posts?q=flask)
- [ AWS ](https://www.treinaweb.com.br/blog/posts?q=aws)
- [ HTML5 ](https://www.treinaweb.com.br/blog/posts?q=html5)
- [ Ruby ](https://www.treinaweb.com.br/blog/posts?q=ruby)
[ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) [ HTML ](https://www.treinaweb.com.br/blog/categoria/html) [ Desenvolvimento Web ](https://www.treinaweb.com.br/blog/categoria/entrevistas-desenvolvimento-web) # Trabalhando com a tag âncora no HTML
Nesse artigo veremos como a tag âncora (link) e seus atributos são utilizados no desenvolvimento de sites, e como ela pode nos ajudar.
[](https://www.treinaweb.com.br/blog/autor/rafael-oliveira "Rafael Oliveira") 4 anos atrás
Receba nossos conteúdos Enviar
### Você sabia que a TreinaWeb é a **mais completa
escola para desenvolvedores** do mercado?
O que você encontrará aqui na TreinaWeb?
 **Mentoria**
de carreira
 **Suporte
direto** com
os professores
 **Plano de
estudos** simples
e direto
 Projetos voltados
ao **mercado de
trabalho**
[ Matricule-se agora mesmo ](https://www.treinaweb.com.br/checkout/pagamento/plano/anual)
1. [Artigos](https://www.treinaweb.com.br/blog)
2. Trabalhando com a tag âncora no HTML
Tendo em vista que inicialmente a principal ideia quando foi criado o HTML era facilitar o compartilhamento de documentos, mas, como consequência do avanço da programação, possuímos uma ferramenta que vai além do que podemos imaginar.
Ampliando a ideia de compartilhamento de documentos, atualmente, temos uma ferramenta que consegue vincular um link externo, por exemplo, dentro do nosso HTML.
Veremos a seguir sobre a tag âncora.
[  ](https://www.treinaweb.com.br/ebook/guia-HTML/)
## O que é a tag de âncora?
A tag ``, conhecida como tag de âncora, é responsável por vincular os demais documentos que o nosso HTML possui, links internos e externos.
Para conseguirmos declarar essa tag, devemos incluir o atributo `href` e uma frase ou palavra dentro da tag ``.
```html
TreinaWeb
```
A palavra **TreinaWeb** irá “esconder” o link, quando clicado, será direcionado para o site da TreinaWeb.
![Google Chrome Developer Tools]()
##### Curso Google Chrome Developer Tools
[ Conhecer o curso ](https://www.treinaweb.com.br/curso/google-chrome-developer-tools)
## Atributos tag âncora
Além de `href`, a tag `` possui alguns outros atributos, e cada um deles tem o seu papel específico. Esses atributos são: `target` e `rel`.
### Href
Em primeiro lugar, temos o `href` (hypertext reference), em português, referência para hipertexto, que nada mais é do que a tag onde colocamos a URL do site que queremos vincular ao nosso HTML. É necessário adicionarmos a URL por completo, isso inclui o protocolo https. Ao incluirmos a URL do site desejado, basta colocarmos uma palavra ou frase entre o fechamento e abertura da tag ``. Quando clicarmos nessa palavra/frase, seremos direcionados ao site vinculado. É possível também utilizarmos a tag `` apenas para voltar ao topo da nossa página, para isso, inserimos uma cerquilha. Ficando dessa forma:
```html
Topo
TreinaWeb
```
[  ](https://www.treinaweb.com.br/lp/aula-gratis/)
### Target
Logo após, temos o atributo `target`, utilizamos ele para especificar onde iremos visualizar o link após clicarmos, seja ele interno ou externo. Para isso, vamos atribuir os seguintes valores:
Para que o link seja aberto em uma nova aba:
```html
TreinaWeb
```
Mas, caso queira que o link seja aberto na mesma aba, sendo esse seu comportamento padrão, basta declarar:
```html
TreinaWeb
```
### Rel
Por fim, temos o atributo `rel` (relationship), em português, relação. É muito importante que saibamos que o atributo `rel` contém alguns valores, sendo eles distintos uns dos outros. Iremos abordar os valores de `nofollow`, `noopener` e `noreferrer`, que está ligado diretamente com o `noopener`.
A forma correta para declararmos `rel` com o valor de `nofollow` é:
```html
TreinaWeb
```
Portanto, quando fazemos isso, estamos basicamente falando para o Google não dar importância para o link que estamos referenciando, ou seja, ele irá ler o nosso link de âncora, apresentar ao usuário, porém, o mesmo não será ranqueado.
Em outras palavras, sua principal finalidade é evitar com que pessoas paguem desenvolvedores de sites para aumentarem a visualização dos seus links (ranqueamento). Isso é feito quando declaramos a tag de âncora sem o atributo `rel` com o valor de `nofollow`.
O [JavaScript](http://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-javascript "JavaScript") possui uma característica que permite que uma nova página obtenha total controle da aba em que foi aberta através da referência da tag ``. Portanto, tendo esse controle, é possível abrir e acessar o site original, e assim, obter informações sigilosas.
![JavaScript - Fundamentos]()
##### Curso JavaScript - Fundamentos
[ Conhecer o curso ](https://www.treinaweb.com.br/curso/javascript-fundamentos)
Sendo assim, para ser possível bloquear essa aplicação, declaramos o atributo `rel` com dois valores, `noopener`, que irá impedir que esse recurso do JavaScript seja utilizado. Já o valor `noreferrer`, não permite que essa transmissão de informações para a nova página seja feita.
```html
TreinaWeb
```
## Declarações da tag âncora
Para declararmos `` com os atributos `target` e `rel`, fazemos assim:
```html
TreinaWeb
```
Da mesma forma, aplicamos em `` o atributo `target` com o valor de `_self` e `rel` com valor de `nofollow`:
```html
TreinaWeb
```
Devemos lembrar que, o valor `_self` faz com que o nosso link seja aberto na mesma aba de navegação.
No navegador, vamos visualizar dessa forma:
Sendo assim, quando clicarmos, teremos esse resultado:
Esse é o comportamento do valor `_blank` quando aplicamos no atributo `target`, abrindo o link em uma nova aba.
Já o `_self` fica dessa forma:
Esse é o comportamento do valor `_self` quando aplicamos no atributo `target`, abrindo o link na mesma aba de navegação.
![Acessibilidade - Introdução]()
##### Curso Acessibilidade - Introdução
[ Conhecer o curso ](https://www.treinaweb.com.br/curso/acessibilidade-introducao)
## Tag âncora com link interno
Além do mais, uma das funcionalidades da tag `` é nos permitir incluir links internos, ou seja, no nosso próprio documento HTML, ou até mesmo externos, como já dito anteriormente.
Para aplicarmos essa função, devemos primeiramente criar dois documentos HTML, podendo ser, por exemplo, `home.html` e `sobre.html`. Feito isso, agora devemos adicionar dentro do `body` do nosso `home.html`, a tag ``, e dentro dela, iremos vincular nossa segunda página, `sobre.html`. Dessa forma:
```html
Página Sobre
```
Quando clicamos na frase “Página Sobre”, seremos direcionados para a mesma. Quando não atribuímos o valor `_blank` para o atributo target, ele irá assumir por padrão o valor de `_self`, abrindo o link na mesma aba de navegação.
Podemos fazer com que a página sobre consiga acessar a página home, sendo o inverso do que fizemos antes.
```html
Voltar para Página Home
```
## Tag de âncora com link externo
A ideia é a mesma quando vamos adicionar links externos, escolhemos qual link queremos vincular a tag âncora e adicionamos o mesmo.
```html
Blog da TreinaWeb
```
Como dito anteriormente, é necessário adicionarmos a URL por completo, incluindo o [protocolo HTTPS](https://www.treinaweb.com.br/blog/termos-comuns-de-seguranca-https).
## Conclusão
Hoje, vimos a importância e a funcionalidade da tag de âncora, agora podemos aplicá-la em nossos projetos, deixando assim mais dinâmico e amplo, adicionando referências bibliográficas caso seja necessário, linkando redes sociais, e qualquer outro site, link interno ou externo que quisermos.
É de suma importância que consigamos entender cada funcionalidade e atributo apresentado neste artigo, pois o uso deles fazem total diferença na prática.
- [ #Front-end ](https://www.treinaweb.com.br/blog/tag/front-end)
- [ #HTML5 ](https://www.treinaweb.com.br/blog/tag/html5)
- [ #Programação ](https://www.treinaweb.com.br/blog/tag/programacao)
- [ #tag âncora ](https://www.treinaweb.com.br/blog/tag/tag-ancora)
#### Autor(a) do artigo
![Rafael Oliveira]()
##### Rafael Oliveira
Estudante de programação, atualmente me especializando no Front End. Faço curso de Desenvolvimento de Sistemas na Escola Tecnica Estadual Doutora Ruth Cardoso e o meu principal objetivo é me tornar um Full Stack. Nas horas vagas costumo cozinhar, pois sou apaixonado pela área da culinária.
[ Todos os artigos ](https://www.treinaweb.com.br/blog/autor/rafael-oliveira)
#### Artigos **relacionados** [ Ver todos ](https://www.treinaweb.com.br/blog/posts)
- [](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end "Desenvolvimento Front-end") ![Desenvolvimento Front-end]()##### [ Guia da linguagem HTML ](https://www.treinaweb.com.br/blog/guia-da-linguagem-html)
Esse guia é perfeito pra você que está começando ou quer entender melhor como podemos trabalhar com...
- [](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end "Desenvolvimento Front-end") ![Desenvolvimento Front-end]()##### [ O que é HTML? ](https://www.treinaweb.com.br/blog/o-que-e-html)
No artigo de hoje, será abordado o tema HTML, nele irá conter desde sua história, quem o criou e com...
- [](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end "Desenvolvimento Front-end") ![Desenvolvimento Front-end]()##### [ Trabalhando com formulários no HTML ](https://www.treinaweb.com.br/blog/trabalhando-com-formularios-no-html)
No artigo de hoje, veremos um recurso muito utilizado pelos desenvolvedores front-end e presente no...
- [](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end "Desenvolvimento Front-end") ![Desenvolvimento Front-end]()##### [ Trabalhando com JavaScript no navegador ](https://www.treinaweb.com.br/blog/trabalhando-com-javascript-no-navegador)
Ao utilizar JavaScript para desenvolvimento web, é necessário entender o funcionamento do DOM (Docum...
- [](https://www.treinaweb.com.br/blog/categoria/csharp "C#") ![C#]()##### [ Trabalhando com a template engine Liquid no ASP.NET Core ](https://www.treinaweb.com.br/blog/trabalhando-com-a-template-engine-liquid-no-asp-net-core)
Em alguns projetos pode ser necessário substituir o Razor por outra engine template. Neste caso, apr...
- [](https://www.treinaweb.com.br/blog/categoria/ferramentas "Ferramentas") ![Ferramentas]()##### [ VS Code - Melhores extensões para Front-End - Parte 1 ](https://www.treinaweb.com.br/blog/vs-code-melhores-extensoes-para-front-end-parte-1)
Conheça as melhores extensões disponíveis do VS Code para Front-End e melhore a eficiência dos seus...
- [](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end "Desenvolvimento Front-end") ![Desenvolvimento Front-end]()##### [ Criando máscara monetária com expressões regulares ](https://www.treinaweb.com.br/blog/criando-mascara-monetaria-com-expressoes-regulares)
Nesse artigo aprenderemos a criar uma máscara para inputs que irá deixar seus projetos mais profissi...
- [](https://www.treinaweb.com.br/blog/categoria/css "CSS") ![CSS]()##### [ Guia da linguagem CSS ](https://www.treinaweb.com.br/blog/guia-da-linguagem-css)
Nesse guia completo veremos como funciona e quais as formas de criar estilizações com CSS, necessári...
- [](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end "Desenvolvimento Front-end") ![Desenvolvimento Front-end]()##### [ A importância das metatags no HTML ](https://www.treinaweb.com.br/blog/a-importancia-das-metatags-no-html)
Nesse artigo aprenderemos sobre as metatag no HTML. Vamos aprender como utilizar e o porquê devemos...
- [](https://www.treinaweb.com.br/blog/categoria/javascript "Javascript") ![Javascript]()##### [ Como executar seu primeiro código JavaScript ](https://www.treinaweb.com.br/blog/como-executar-seu-primeiro-codigo-javascript)
Vamos aprender e executar nosso primeiro código em JavaScript, entendendo sobre a utilização do cons...
- [](https://www.treinaweb.com.br/blog/categoria/react "React") ![React]()##### [ Como instalar e executar o React ](https://www.treinaweb.com.br/blog/como-instalar-e-executar-o-react)
Veja neste artigo como instalar e executar o React, então confira neste artigo como instalar o React...
- [](https://www.treinaweb.com.br/blog/categoria/javascript "Javascript") ![Javascript]()##### [ Como instalar o TypeScript ](https://www.treinaweb.com.br/blog/como-instalar-o-typescript)
Neste artigo veremos como instalar o TypeScript, conhecer o arquivo tsconfig, executar nosso primeir...
###### 
Escola online para desenvolvedores
- [ ](https://github.com/treinaweb)
- [ ](https://www.facebook.com/TreinaWeb/)
- [ ](https://www.instagram.com/treinaweb/)
- [ ](https://twitter.com/treinaweb)
- [ ](https://www.youtube.com/user/TreinaWeb)
- [ ](https://www.linkedin.com/company/treinaweb)
###### Inscreva-se e receba nossos lançamentos, promoções e novidades
Nome: E-mail: Inscreva-se
fechar ### Qual o número do seu WhatsApp?
### Quais são as suas áreas de interesse?
Base para Devs Front-end
Back-end Mobile
Bancos de Dados Cloud
IA E mais
Enviar
Cursos [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile)
[ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) [ IA ](https://www.treinaweb.com.br/categoria/ia) [ E mais ](https://www.treinaweb.com.br/categoria/e-mais)
[ Infra ](https://www.treinaweb.com.br/categoria/infra)
A empresa [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) [ O que os alunos dizem? ](https://www.treinaweb.com.br/depoimentos) [ Política de Privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) [Termos de uso](https://www.treinaweb.com.br/termos-de-uso) [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso)
[ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) [Cursos para empresas](https://www.treinaweb.com.br/empresas) [Artigos](https://www.treinaweb.com.br/blog) [Contato](https://www.treinaweb.com.br/contato)
[Contato](https://www.treinaweb.com.br/contato) [Artigos](https://www.treinaweb.com.br/blog) Baixe nosso aplicativo - [](https://apps.apple.com/us/app/treinaweb/id1322729447)
- [](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile)
###### Aceitamos as principais formas de pagamento
-
-
-
-
-
-
-
-
###### Seus dados e compra estão 100% seguros
[](javascript:) [](https://transparencyreport.google.com/safe-browsing/search?url=www.treinaweb.com.br)
Av. Paulista, 1765, Conj 71 e 72 - Bela Vista - São Paulo - SP - 01311-200 © 2004 - 2026 TreinaWeb Tecnologia LTDA - CNPJ: 06.156.637/0001-58