Trabalhando com a tag âncora no HTML \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto**
Termina em Tempo restante da oferta: 13 Horas
22 Min
13 Seg
Tempo restante da oferta: 13 22 13
[Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26)
[ ](https://www.treinaweb.com.br) Explorar
[ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login)
[ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Trabalhando com a tag âncora no HTML [ 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.
[ Rafael Oliveira ](https://www.treinaweb.com.br/blog/autor/rafael-oliveira) 4 anos atrás
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.
[  Curso HTML5 + CSS3 - Dominando o CSS Grid Layout Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-dominando-o-css-grid-layout)
## 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.
[  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.
[  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
## 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)
## Continue estudando
Transforme leitura em prática com os cursos e formações da TreinaWeb.
[Ver cursos](https://www.treinaweb.com.br/cursos)
Continue lendo
## Artigos relacionados
-  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end)
4 anos atrás
## [ 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 a linguagem HTML .
Ler artigo
-  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end)
4 anos atrás
## [ 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 como deve ser montada sua estrutura.
Ler artigo
-  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end)
4 anos atrás
## [ 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 nosso dia a dia, formulários.
Ler artigo
-  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end)
6 anos atrás
## [ 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 (Document Object Model). O DOM é o que permite o acesso aos elementos HTML/XML para manipulá-los de forma que seja interessante para os nossos objetivos como desenvolvedor.
Ler artigo
-  [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp)
7 anos atrás
## [ 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, aprenda como fazer esta substituição pelo Liquid.
Ler artigo
-  [ Ferramentas ](https://www.treinaweb.com.br/blog/categoria/ferramentas)
6 anos atrás
## [ 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 trabalhos.
Ler artigo
-  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end)
3 anos atrás
## [ 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 profissionais utilizando as expressões regulares.
Ler artigo
-  [ CSS ](https://www.treinaweb.com.br/blog/categoria/css)
3 anos atrás
## [ 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ário para qualquer desenvolvedor front-end
Ler artigo
-  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end)
4 anos atrás
## [ 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 dar bastante atenção para essas tags.
Ler artigo
-  [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript)
6 anos atrás
## [ 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 console do navegador e ferramentas on-line.
Ler artigo
-  [ React ](https://www.treinaweb.com.br/blog/categoria/react)
4 anos atrás
## [ 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 por CDN (Link) e CLI (Linha de comando)
Ler artigo
-  [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript)
5 anos atrás
## [ 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 primeiro código no Node.js e no navegador.
Ler artigo
## Um ano de acesso total para você viver de programação.
Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho.
- **1 ano** de acesso a **todos os cursos**
- Cursos novos **toda semana**
- Suporte **direto com professores**
- Plano de carreira **personalizado**
- **Certificados digitais** inclusos
- **Aplicativos** para Android e iOS, com **acesso offline**
**Garantia incondicional de satisfação**
Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro.
### Acesso completo a todos os cursos e dezenas de Formações.
12 meses
Economize R$ 840,00 54% OFF
de 12x R$ 129,00 por apenas
12x R$ 59,00
sem juros no cartão de crédito ou R$ 599,00 à vista
Oferta termina em **13h 22min 13s**
- Acesso imediato e ilimitado durante 1 ano.
- Plano de carreira personalizado.
- Suporte direto com professores.
- E muito mais!
[Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26)
[ ](https://www.treinaweb.com.br)
Escola online de programação, tecnologia e IA.
- [ ](https://www.facebook.com/TreinaWeb/)
- [ ](https://www.instagram.com/treinaweb/)
- [ ](https://www.youtube.com/user/TreinaWeb)
- [ ](https://twitter.com/treinaweb)
- [ ](https://www.linkedin.com/company/treinaweb)
- [ ](https://github.com/treinaweb)
## Inscreva-se em nossa newsletter
Receba lançamentos, promoções e novidades.
Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se
## 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)
- [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos)
## Conteúdo
- [ 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)
- [ Planos ](https://www.treinaweb.com.br#assinatura)
- [ Depoimentos ](https://www.treinaweb.com.br#depoimentos)
- [ Comunidade ](https://www.treinaweb.com.br#comunidade)
- [ Corpo docente ](https://www.treinaweb.com.br#docente)
## A empresa
- [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre)
- [ Perguntas frequentes ](https://www.treinaweb.com.br#faq)
- [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb)
- [ Cursos para empresas ](https://www.treinaweb.com.br/empresas)
- [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso)
- [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco)
- [ Artigos ](https://www.treinaweb.com.br/blog)
- [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers)
- [ Contato ](https://www.treinaweb.com.br/contato)
- [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade)
- [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso)
## Baixe nosso aplicativo
[ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile)
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