Esta página integra o Compêndio sobre o uso dos elementos HTML e descreve o elemento: A
A é a abreviação para a palavra inglesa ANCHOR que traduzida significa: ÂNCORA.
O HTML proporciona muitas das facilidades de estruturação de documentos e inserção de ‘rich text’ disponíveis em linguagens de publicação convencional. Contudo o que o diferencia das demais linguagens é a sua capacidade de criar hypertextos e interatividade em um documento. O construtor básico do hypertexto é o link também conhecido como hyperlink ou ainda Web link. Apesar de um conceito simples, a idéia do link é uma das forças primárias para o sucesso da Web.
Um link compreende duas extremidades denominadas âncoras e uma direção. Um link começa em uma âncora inicial e termina em uma âncora destino que pode ser qualquer recurso Web (por exemplo: uma imagem, um vídeo clip, um som, um programa, um documento HTML, etc.).
Exemplo:
...
<body>
...
<p>Para maiores informações consulte o
<a href="http://www.maujor.com/tutorial/faq.php">
FAQ-CSS no Site do Maujor
</a>
e também o <a href="http://www.diagramas.com/dia-css.gif">
diagrama CSS</a>
</p>
O exemplo acima contém dois links. No primeiro a âncora destino é uma documento Web e no segundo uma imagem GIF.
Fisicamente a âncora de destino pode estar posicionada em três tipos de local:
É comum em documentos extensos encontrar-se de tempos em tempos ao longo do texto, links do tipo “Ir para o Topo” ou “Índice” ou “Ir para Capítulo III” e tantos outros, onde o desenvolvedor oferece ao usuário a facilidade de “pular” para determinado lugar do documento, simplesmente ativando um link e sem a necessidade de agir na barra de rolamento vertical do navegador a procura de um destino. Tais links são chamados de links internos ou “in-page” links. Um bom exemplo de uso de tais links encontra-se na página FAQ-CSS do Site do Maujor. Naquela página usei um link denominado “índice” colocado no fim de cada uma das respostas remetendo o usuário de volta ao Índice das perguntas no topo da página. Notar ainda que o texto das perguntas no Índice também é um link interno remetendo à resposta.
Para construir um link interno use a marcação conforme explicado a seguir:
<a href="#indice">Ir para o índice</a>
<h4><a name="indice">Índice</a></h4>
<h4 id="indice">Índice</h4>
Observe como mostrado no exemplo seguir
<h3 id="indice">Índice</h3>
<ol>
<li><a href="#css">O que significa a sigla CSS?</a></li>
<li><a href="#finalidade">Qual é a finalidade das CSS?</a></li>
<li><a href="#porque">Por que devo usar CSS?</a></li>
...
</ol>
<h3>Perguntas e respostas</h3>
<ol>
<li id="css">O que significa a sigla CSS?
...resposta...
<p><a href="#indice">Ir para Índice</a></p>
<li id="finalidade">Qual é finalidade das CSS?
...resposta...
<p><a href="#indice">Ir para Índice</a></p>
<li id="porque">Por que devo usar CSS?
...resposta...
<p><a href="#indice">Ir para Índice</a></p>
...
</ol>
...Observe que os itens de lista marcados na cor azul acima são âncoras iniciais cujo texto é a pergunta e apontam para um fragmento identificador (#css, #finalidade, #porque) colocado como id (id=”css”, id=”finalidade”, id=”porque”) de um item de lista marcada na cor vermelha acima, que contém a resposta para a pergunta. Estas são as âncoras destino. Assim, clicando na pergunta você irá direto para a resposta.
Observe ainda que ao final de cada resposta foi colocada uma âncora inicial cujo texto é “Ir para o Índice” apontando para o fragmento identificador #indice colocado como id no elemento H3 que marca o título do Índice. Assim, clicando em “Ir para Índice” ao final de cada pergunta você será remetido de volta ao índice contendo as perguntas
O caso mais comum deste tipo são os links que compõem o menu de navegação do site. Neste tipo, o usuário clica em um link e é remetido a uma âncora de destino contida no próprio site (ou domínio do site).
Há duas opções para definir o atributo href na âncora inicial:
Caminho absoluto é a indicação da âncora de destino escrevendo o endereço completo no atributo href.
Seja um trecho do menu de navegação do site do Maujor como mostrado a seguir:
...
<li>
<a href="http://www.maujor.com/" ...>Home</a>
</li>
...
<li>
<a href="http://www.maujor.com/tutorial/faq.php" ...>FAQ CSS</a>
</li>
...Caminho relativo é a indicação da âncora de destino escrevendo o endereço relativo à raiz do site no atributo href.
Seja o mesmo trecho acima, do menu de navegação do site do Maujor como mostrado a seguir:
...
<li>
<a href="/" ...>Home</a>
</li>
<li>
<a href="/tutorial/faq.php"; ...>FAQ CSS</a>
</li>
...Este é o caso de links que apontam para páginas de sites de parceiros ou links para páginas de terceiros, contendo informação complementar sobre o assunto tratado.
A opção para definir o atributo href na âncora inicial é uma só:
Assim, devemos indicar a âncora de destino escrevendo o endereço completo do documento no atributo href.
Seja um trecho dos créditos de uma das traduções de um documento do W3C contido no site do Maujor como mostrado a seguir:
...
<p>
O original está no <a href="http://www.w3.org ...>Site do W3C</a>
</p>
...Um erro comum ao especificar âncoras de destino por caminho absoluto é a omissão de http:// (ou https:// ou ftp:// ou seja qual for o protocolo de transferência do documento). Lembre-se, embora a sintaxe www.maujor.com funcione sem problemas na barra de endereços do navegador, não funciona em caminho absoluto para âncoras de destino.
[ « anterior ] [ index ] [ « próximo » ]
Em 2006 comecei a publicar nesse blog uma série de desafios CSS que consistiam em…
Há muito tempo que eu não publico um "Teste seu conhecimento". Esta semana, revendo algumas…
Introdução Elementos da marcação HTML podem ser aninhados uns dentro de outros, criando-se uma cadeia…
HTML5? Web universal? É comum eu me deparar com dúvidas sobre a HTML5 não só…
Quem é Tab Atkins Jr? Tab Atkins Jr, um desenvolvedor americano, trabalhou durante muitos anos…
Pessoal, a BrazilJS Conf 2013 disponibilizou para o Maujor cupons de desconto para serem oferecidos…
View Comments
Como faço o efeito de rolagem? Pois o meu posiciona na ancora imediatamente quando clica no link. Queria dar aquele efeito como se a página estive sendo rolada até chegar no ponto certo.
Alguém pode me ajudar?
Olá! Adorei o seu post.
Usei a opção de âncora para a mesma página no meu blog e quando clico nas opções, abre uma nova página informando que não foi possível encontrar o blog desejado.
Será que você poderia me ajudar, por favor?
Estou apenas começando a aprender HTML.
Obrigada.
Estava apanhando com isso até que começei a usar o para simular um caminho absoluto. =)
Excelente artigo! Maurício, que tal um artigo sobre XLink? Isso já seria uma tecnologia a ser usada hoje em dia, ou o problema ainda é a falta de suporte dos navegadores?
Muito legal o post.
Simples e objetivo...
Passarei o link para meus alunos.
:)