âncoras HTML: aqui está como criar Links para navegação rápida

Divulgação: O seu suporte ajuda a manter o site em execução! Nós ganhamos uma taxa de referência para alguns dos serviços que recomendamos nesta página. Saiba mais

o elemento âncora é usado para criar hiperligações entre uma âncora fonte e uma âncora de destino. A fonte é o texto, imagem ou botão que se liga a outro recurso e o destino é o recurso para o qual a âncora fonte se liga.,hiperligações

são uma das tecnologias fundamentais que fazem da web a auto-estrada da informação, e compreender como usar elementos âncora é uma das primeiras coisas que você precisa dominar ao aprender HTML.

o elemento de fixação

a marca do elemento de fixação é a letra “a”rodeada por parêntesis de ângulo como este: <a>. Ambos os atributos de abertura e fechamento são necessários, e todo o conteúdo entre as tags constitui a fonte de âncora.,

embora os exemplos acima produzam elementos âncora, eles não são de grande utilidade, uma vez que não incluímos quaisquer instruções adicionais. Neste momento, estes elementos âncora não se ligam a nada. Para ligar uma âncora fonte a uma âncora de destino, precisamos aplicar alguns atributos adicionais ao elemento âncora.

neste tutorial curto vamos cobrir os atributos que você pode usar para adicionar uma âncora de destino para suas hiperlinks, dizer ao navegador o que fazer com o link, e adicionar significado semântico para ancorar elementos para navegadores e web crawlers para usar.,

os atributos de Âncora mais importantes

Existem três atributos de âncora que você precisa saber para criar hiperligações funcionais. Esses atributos são href target e download.

especifique um alvo de hiperligação: href

a referência de hipertexto, ou href, o atributo é usado para indicar um alvo ou destino para o elemento âncora. É mais comumente usado para definir um URL onde o elemento âncora deve se ligar.,


In this example, the <a href="http://example.com">anchored text</a>links to the URL <em>www.example.com</em>.

An href can do a lot more than just link to another website.

  • Pode ser usado para ligar diretamente a qualquer elemento de uma página web que tenha sido atribuído um id.
  • Pode ser usado para ligar a um recurso usando um protocolo diferente de http.
  • Pode ser usado para executar um script.

o seguinte HTML inclui exemplos de todas as três ações:

na caixa abaixo você verá que HTML como ele aparece no navegador. Tente cada link para ver o que acontece.,

este primeiro elemento de âncora liga-se ao título desta secção do tutorial, ligando-se a um id atribuímos a esse elemento de cabeçalho.

Podemos usar o protocolo mailto para criar um link que irá tentar lançar o programa de E-mail padrão no seu computador. Vamos tentar! Adoraríamos que nos contactasse!

finalmente, se você clicar no link abaixo de uma janela de alerta JavaScript cortesia irá aparecer. Clique no link para ver o que acontece.,

o elemento href é muito fácil de usar, mas podemos obter muito mais quilometragem dos nossos elementos âncora conhecendo o atributo target.

indique uma localização para abrir a ligação: alvo

vamos olhar para trás para o mailto ligação que criámos no exemplo anterior. Aqui está esse código novamente:


We'd love for you to <a href="mailto:">get in touch</a> with us!

embora essa ligação seja útil, a forma como ela abre não é ideal., Dependendo de como o seu computador e navegador estão configurados, é possível que se carregar no link criado por esse texto irá redirecionar a sua janela de navegador para longe deste site para uma aplicação de E-mail baseada na web, como o Gmail ou o Yahoo! Correio. Embora certamente queiramos incentivar os nossos visitantes a contactar-nos, não queremos fazê-lo à custa de enviar visitantes para longe do nosso site.

a resposta a este enigma é o atributo target emparelhado com o valor _blank.,


We'd love for you to <a href="mailto:" target="_blank" rel="noopener">get in touch</a> with us!

Quando adicionamos o target atributo _blank atributo para o nosso link de dizer o navegador de visitantes para abrir o link em uma nova (em branco) guia ou janela. Se nós rendermos esse código no navegador, quando um visitante clica no link ele abrirá em uma nova aba.adoraríamos que nos contactasse!

Indique Um recurso para transferir: Transferir

As ligações também são usadas para dizer a um navegador para começar a transferir um ficheiro., O atributo download é utilizado para identificar uma ligação que deve iniciar um download e o valor atribuído ao atributo download é o nome do ficheiro a descarregar.

o atributo href também entra em jogo ao configurar um elemento âncora que inicia um download. Enquanto o atributo download nomeia o arquivo, o atributo href aponta para a localização onde o arquivo está hospedado.,

Aqui está um exemplo de como um download inicia elemento âncora ficaria:

Se href no exemplo acima apontado para um arquivo real, quando a transferência foi concluída, o arquivo baixado deve ser chamado Example_File.sair onde .ext seria o formato do arquivo que foi baixado. Não é necessário incluir a extensão do tipo de ficheiro no valor atribuído ao atributo download. A extensão de arquivo será identificada automaticamente quando o navegador transferir o arquivo, e automaticamente adicionado ao nome do arquivo baixado.,

Ligações internas e externas

Existem dois tipos de recursos para os quais podemos ligar usando o a elemento: interno e externo. Links internos são aqueles que apontam para outras páginas do nosso site. Links externos apontam para páginas web que não fazem parte do nosso site.

construir ligações internas é importante por algumas razões diferentes:

  • Ligações internas são usadas para criar menus de navegação que ajudam os visitantes do site a navegar no nosso site.
  • Ligações internas são usadas no texto do conteúdo do site para ajudar os visitantes do site a localizar conteúdo relacionado.,
  • Ligações internas também são usadas por web crawlers do motor de busca para localizar as páginas de um site e para compartilhar Autoridade (também conhecido como link juice) com as outras páginas de um site.

ao escrever Ligações internas certifique-se de que não exagera. O suco de link de qualquer página web dada é compartilhado entre os links na página. Então, quanto mais links você colocar em uma página, mais diluído o suco passado para cada link se torna. Uma boa regra é não ter mais de 100 links por página, embora haja exceções no caso de sites extremamente grandes e complexos.,

ligações externas também são importantes por algumas razões diferentes:

  • ligações externas podem ser recomendadas, necessárias, ou apenas as melhores práticas para fornecer a devida atribuição à fonte de uma ideia ou de um recurso.
  • links externos permitem-nos consultar os visitantes do site sobre conteúdos úteis relacionados.quando outros sites publicam links externos que apontam para o nosso site, esses links conhecidos como backlinks permitem que o suco de link flua para o nosso site e melhora a posição do nosso site nas páginas de resultados do motor de busca (SERP).,

ao escrever links externos tente evitar a ligação com concorrentes diretos. Você não quer ajudar seu ranking SERP para termos de pesquisa que você está visando para o seu próprio site. É também uma boa idéia usar o atributo target="_blank" ao escrever links externos. Ao abrir links externos em uma nova página você mantém os visitantes em seu site por mais tempo.,

Nunca Diga “Clique Aqui”

com Certeza você já viu e talvez até mesmo criados links que algo parecido com isso:

To learn more <a href="http://example.com">click here</a>!

Existem pelo menos três boas razões para usar o generic elemento âncora de texto, como “Clique Aqui” é uma prática terrível.

  • visitantes do site que dependem de tecnologias de apoio, tais como leitores de tela, terão dificuldade em decifrar o Significado de links que fazem uso de texto de link genérico, como “Clique aqui”.,
  • os visitantes do site que estão digitalizando uma página terá que levar vários segundos adicionais para investigar o texto em torno do link para ter uma idéia do que a âncora links para.
  • web crawlers motor de busca associam texto do elemento âncora com o URL da ligação. O texto do elemento âncora devidamente selecionado ajuda os motores de busca a determinar a relevância de uma página web para palavras-chave específicas. O texto genérico não diz nada aos motores de busca sobre a página web ligada.

o texto do elemento âncora Ideal é sucinto e identifica uma palavra-chave ou palavras-chave que são relevantes para a página web., Aqui está uma frase que inclui dois exemplos de texto de link devidamente selecionado:

o primeiro link diz Aos web crawlers e visitantes do site que o site tem algo a ver com as palavras-chave “motores de busca”. O segundo diz aos visitantes e motores de busca que a página encontrada no URL relativo /seo/ está relacionada com as palavras-chave “tutorial SEO”.

Absolute vs. Relative URLs

there were two links in our last example: and /seo/. O primeiro é um exemplo de uma URL absoluta., Os URLs absolutos são aqueles que incluem uma descrição completa (absoluta) do destino do link. Os URLs absolutos incluem o protocolo (http) e o nome de domínio completo e a localização do arquivo necessários para chegar à âncora de destino.

o segundo é um exemplo de uma URL relativa. Os URLs relativos ligam-se a uma página web, descrevendo a posição da página em relação à posição da página actual. Ao escrever links internos que apontam para outras páginas do mesmo site, temos a opção de escrever URLs relativos em vez de URLs absolutos.,

Por exemplo, se estamos no seguinte endereço: , e nós queremos ligar para o azul página de produto, podemos utilizar qualquer um dos seguintes elementos de âncora:

<a href="/products/blue-product/">Go check out the blue product!</a><a href="../blue-product/">Go check out the blue product!</a>

o Que a primeira sintaxe diz é: “olhe no nível mais baixo do diretório de arquivo para o arquivo de produtos, e olhe para o azul de produtos dentro do arquivo”. O que a segunda sintaxe diz É: “procure na pasta-mãe do id

diretório para um diretório com o nomeblue-product., Ambos os elementos de âncora apontam para a URL:

vamos dizer que queremos nos ligar a cerca de nós – uma página que existe como um descendente direto da homepage. Aqui está como poderíamos fazer isso:

<a href="/about-us/">Learn more about us.</a>

essa sintaxe diz"volte para o nível mais baixo da árvore de diretórios de arquivos e, em seguida, procure por um diretório intitulado about-us".

Como exemplo final, digamos que estamos neste endereço mais uma vez: , e que queremos ligar para uma página de Subcategoria que existe dentro da categoria /red-products/ ,

<a href="large.php">See all Red Products available in Large!</a>

o Que o parente URL vai fazer é dizer ao navegador para procurar na pasta atual para um arquivo chamado large.php e vai resolver esta URL:

To summarize, when we write relative URLs we have three options:

  • When we start a relative URL with "/” we tell the browser to look for the specified file or folder in the lowest level of the file directory.
  • If we start a relative URL with "../” we tell the browser back up in the directory tree one level.
  • If we start a relative URL with a file or folder name we tell the browser to look for the specified resources in the current file.

Why Are Relative URLs Used?

Relative URLs are very popular with web developers. It is common for websites to be developed on a staging server with a domain name that is not the same as the eventual permanent domain name. If relative URLs are used, when the site is transferred from the staging server to being live on the web all of the relative URLs will continue to work just fine. However, if absolute URLs are used the development team will have to go through the site fixing all of the URLs.

While the benefit of using relative URLs during the development of a site on a staging server not inconsiderable, it comes at a cost.

While you should know how relative URLs work, many experienced developers and SEO experts recommend sticking to absolute URLs as much as possible.

Other Useful Anchor Attributes

With just the three attributes we’ve covered so far, you can complete every hyperlinking task you will encounter on the web. However, there are additional attributes that can be used to tell a visitor’s web browser and search engines that index our website something about the meaning of the hyperlinks.

Specify the Language of the Anchor Destination: hreflang

This is optional tag can be used to tell a web browser the language of the document to which the anchor is linked. For example, if we were linking to a URL and wanted to tell the browser that the destination anchor was in Spanish we would use the appropriate language code in ISO 639-1 format as the value of the hreflang atributo.

especificar a relação entre a origem e o Destino: rel

a relação, ou rel, o atributo é utilizado para descrever a relação entre a âncora de origem e a âncora de destino. Por exemplo, poderíamos usar o seguinte código para identificar o destino como sendo um recurso sobre o autor do documento.,


This artile was written by <a href="https://plus.google.com/+AuthorName" rel="author">Great Author</a>.

Existem vários valores diferentes que podem ser usados para descrever a relação entre a ligação de origem e a ligação de destino. Aqui estão alguns dos mais comuns:

  • rel="nofollow": Use este atributo se estiver a ligar-se a um recurso a que não deseja emprestar a reputação do seu site. Por exemplo, se você ligar para um site spammy como um exemplo do que não fazer, você gostaria de usar este valor para evitar contribuir para a visibilidade do motor de busca do site.,
  • rel="alternate": se o seu site tem mais de uma versão – como uma tradução para uma língua diferente – use este valor para identificar o recurso associado como uma versão alternativa da página actual.
  • rel="bookmark": este valor é usado para identificar uma formulação URL que é permanente e pode ser usado para bookmarking.
  • rel="help": identifique um recurso ligado como um ficheiro de Ajuda para a página actual com este valor.
  • rel="license": Use este atributo ao ligar-se a uma licença de copyright reconhecida.,
  • rel="next": se o documento actual existir numa série de documentos, use este valor ao ligar-se ao documento seguinte da série.
  • rel="prev": se o documento actual existir numa série de documentos, use este valor ao ligar-se ao documento anterior na série.
  • rel="noreferrer": se você quiser ligar para um site externo, mas evitar que o site de destino saiba quem é o referrer, use este valor.,

especificar o tipo de suporte da Internet: type

o atributo type é um atributo opcional que pode ser utilizado para identificar o tipo de suporte da Internet, ou o tipo MIME, do documento de destino. Por exemplo, se a ligação a um site renderizado em HTML você poderia adicionar o atributo type="text/html" para dizer ao navegador do visitante que a ligação aponta para um documento HTML.,

neste momento este atributo não faz muito de nada, mas o pensamento é que no futuro a informação contida neste atributo poderia ser usada para de alguma forma comunicar a um visitante do site o tipo de conteúdo que eles estão prestes a ser ligados antes de clicar no link.

o valor type deve ser um tipo de mídia IANA válido. Alguns dos valores mais usados são: text/html text/css application/javascript e multipart/form-data.,

uma Web de Links

A World Wide Web é melhor descrita como uma enorme biblioteca de documentos hiperlink onde elementos de âncora são usados para criar pontes entre documentos relacionados. Nesta definição, os elementos âncora ocupam seu lugar de Direito como a cola que une a web e as pontes que permitem que os usuários da web se movam de um documento para um documento relacionado.

uma maneira comum para links a serem usados é construir um menu de navegação que estabelece a estrutura lógica e hierárquica de um site., Se você quiser aprender como construir menus de navegação eficazes leia o nosso tutorial sobre esse tópico.

Jon é um escritor freelance, entusiasta de viagens, marido e pai. Ele escreve sobre tecnologias web como WordPress, HTML e CSS.

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *