O elemento A
Publicado em: 2007-03-18 — 26.389 visualizacoes
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:
- no mesmo documento que a âncora inicial
- no mesmo domínio que a âncora inicial
- em domínio diferente da âncora inicial
Âncora de destino no mesmo documento que a âncora inicial
É 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:
- Na âncora inicial use href=”#destino” assim:
<a href="#indice">Ir para o índice</a>
Onde #destino é uma referência ao destino do link denominada de “identificador de âncora” ou “fragmento identificador” cuja sintaxe é: um sinal # (tralha ou jogo da velha) imediatamente seguido de um nome. - A âncora destino pode ser marcada de duas formas distintas:
- Usando o atributo name=”destino” em um elemento a no destino, assim:
<h4><a name="indice">Índice</a></h4> - Usando o atributo id=”destino” no elemento destino assim:
<h4 id="indice">Índice</h4>
- Usando o atributo name=”destino” em um elemento a no destino, assim:
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
Âncora de destino no mesmo domínio que a âncora inicial
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:
- Por caminho absoluto;
- Por caminho relativo.
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>
...Âncora de destino em domínio diferente da âncora inicial
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ó:
- Por caminho absoluto;
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 » ]
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
Esta matéria foi publicada em: 2007-03-18 (domingo). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para https://www.maujor.com/blog/2007/03/18/el-a/trackback no seu site.
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.
🙂