HTML: Comportamentos do elemento âncora [a]

Este artigo vem no seguimento de um outro sobre os O Elemento Âncora [a], embora na verdade foi por querer escrever este artigo que escrevi o anterior... Confuso? :-P
Eu explico: Quando pensei em escrever sobre os comportamentos de ligações âncora com o href vazio ou quase, e o que acontece ao clicarmos num desses elementos, tive que preparar o caminho antes com o artigo sobre O Elemento Âncora [a].
Na verdade a intenção era incluir tudo num só artigo, mas como muitas vezes acontece, o texto foi crescendo e tive que optar por deixar o que me inspirou a escrever o artigo em primeiro lugar para o artigo de hoje.

Então vamos a isso.
Existem algumas situações onde precisamos de incluir uma ou outra ligação onde não existe um endereço URL, mas sim um vazio ou algo parecido:

<a href="">
<a href="#">
<a href="#0">
<a href=".">
<a href="?">
<a href="data:">
<a href="video.mp4#t=10,20">
<a href="javascript:void(0)">
       

Vejamos então o que significa cada uma dessas opções e o que acontece ao clicar em algum elemento contendo uma dessas situações:

1. <a href="">

   Recarrega a página actual, preservando o parâmetro de pesquisa, mas removendo o símbolo cardinal [#], se estiver presente na URL.
   Ligações com href vazios significam basicamente navegar novamente para a página actual.
   É como se fosse uma actualização que reenvia os dados para o servidor.

   URL	passa a ser
   /path/	/path/
   /path/#foo	/path/
   /path/?id=foo	/path/?id=foo
   /path/?id=foo#bar	/path/?id=foo
   Clica aqui para demonstração

2. <a href="#">

   Desloca a página para o topo.
   Mas atenção, #top também irá rolar a página para o topo, e nem precisa existir um elemento com id="top".
   Exemplos:

   1. Clica aqui, onde tem href="#".
   2. Clica aqui onde tem href="#top", apesar de não existir nenhum elemento com id="top".
3. <a href="#0">

   Não faz nada desde que não exista na página nenhum elemento com id="0".
   Mas se, por algum motivo, tiveres um elemento com esse ID, basta utilizares outro valor inexistente na página que também funciona.
   Exemplo:

   1. Clica aqui, onde tem href="#0", e não existe nenhum elemento na página com id="0".
4. <a href=".">

   Recarrega a página atual, removendo os parâmetros de pesquisa e o símbolo cardinal [#].
   Mas na verdade, talvez seja mais adequado sizer que "carrega a página para o diretório actual, com base na estrutura do URL", o que pode ser uma recarga, mas também pode ser algo diferente dependendo da URL em questão.

   Nota: Se utilizares href="." como uma ligação para a página actual, certifica-te de que os endereços URL têm uma barra [/] no final, caso contrário, poderão ocorrer comportamentos inesperados.
   O navegador vai interpretar o caminho como se fosse um ficheiro, pelo que "." vai passar a ser o directório acima da localização actual.

   URL	passa a ser
   /path	/
   /path/#foo	/
   /path/?id=foo	/
   /path/	/path/
   /path/#foo	/path/
   /path/?id=foo	/path/
   /path/index.html	/path/
   Clica aqui para demonstração

5. <a href="?">

   Recarrega a página atual, removendo os parâmetros de pesquisa e o símbolo cardinal [#], se estiverem presentes na URL, mas vai preservar o carácter "?".

   Nota: Ao contrário de href=".", as barras finais [/] não importam.
   Os parâmetros de pesquisa serão removidos, mas o caminho será preservado tal como está.

   URL	passa a ser
   /path	/path?
   /path/#foo	/path?
   /path/?id=foo	/path?
   /path?id=foo#bar	/path?
   /index.html	/index.html?
   Clica aqui para demonstração

6. <a href="data:">

   Ligações para URLs de dados, como fragmentos de texto ou imagens com a codificação Base64.
   Exemplo:

   1. Clica aqui para abrires uma imagem codificada com a codificação Base64

      <a href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAE2klEQVRYw+2XS4hcRRSGv1O3bk/3PDKZGTNJJg/MxCQQomiMRDFi0CzcmY0oqODahRiIW3Hhxr0ICm7UqBuzEwQlYiKoi8gYJME8JA/MvCczPZ3p7nur6ri4j+mZZBFRyMJcuJzb91H/X/85569qy10+7D0C9wjcfQIilpf2pf21XhaajTv66Ofv6/8KNOrrxS82eHzyfGyBKgrvvfoGN9ut7A0RRKDLVoitJY4yoSITIQIPv+iz1/IBtYjeo5pFAE1TgnNokmT38zelVuPcW28DVC1gUeX8xDUm63MlSzEGEQEhj5JF4PmxJbJHkhNQVOm4zqBCRwwaUEAVonVDZL+wFqASWZpJm9S5DMgIEjQHN7kosjxl74q5lKAAWrDIr6WI+VkSa7XROO4oQoV68yapd4gR0Gy2GWhAjGC9Z0dPiw29jsvPJPRcN5jpiP7JGKtSoC4rWBLKgMtnQdHFRqFAQUBJvSMNHtFMASgijJiUQ5s9vy70cLpueaJSZ+gPS3skMPdUm7U/CZWm6QAtZUAACYX8uQrOEVa0oYILHufzFKhk0isMVx1Hdi1x9VIfL48tUg3K9K4mvt7Nzaoyt6mHcHiOoS9j4lTQcHsV0I7TefxqBRKXkniXSa8GxGNEOLp3kgHpRi7OMXT/HsyWrTTXLVEZ6qXnym/4y5Nol2fu0SbDJ7tXpKG80kBZgRpQG+GVlQTarTbNpIkxBjEGBAZNytXZhGosxGMQH32M9v69/HDiAq8d3on9tEH07RXkUoTf3abZlLIAFVARVJWAEjTrBq8BRFbVQFDaPsUFj6pHggERHhhYZGLRcW2+xuiT84zXrzN/boThvohTZyfo652i/cgiG6MKfqRFX2pX5L/QQFQxqoSiM2yKX23FLvgyBSoBYwRLgpGUehoYPRczs0mZHWhjfWBmKWHTRETXRUu6zaEk4NzKbtCAIEjeCaJZYsR7wooUhKwLEt/hAyqM3YiZj4TJ+ZgXJhpsX5pndP8on313ltcPbGP2+DSJAV3XQi8rJMmyO2inQ+QdURRhbG9ThCUBkGAQI1zxhlcGbzDV3+LEvj62X/uCnZ9UeXZ4MzMfvc8Ze4qtBzey/ukFZr82SGLRFa5f2iOCQtBMjeQWAnkKXJrNXgyEbCrHLnTz5kNznN4Ne84PYD7+nBEsjZqy4blhdM04f11p0X+8fzkFed5RLfs9a4KQpcGH1T6gJM5lTqiCli4IZxZiPvy9j4NbFnh37QALhwZ5h0VGfzHc9+cUjUqL6IMqPbMB8mG1BMyLDi1TgiqkKU5XdYELDhc8aLbwZBYGiOHH2SpnZ4UD6xd4cNsM3XGLhotojxsGj1XpSQ2UohZAHYAdxhRUUe9vJZAmKWmaghEwpiQhEkBgCsvx8TUwAUe+me9YigKF0CqsrAFddkLJlQ4oLk1JOmsgVkG8YlUQiZAoykl0UKdjNazEuUDLOwIFTGF2xeqY3wulOWXLcqJKM4qWCXRHFWpE9NX6sbUuTMUiUa5CwUEEzaPZWM0IyCrnA0QzJVAtwU1ejAFF05SldotWV2WZQE+1hpluYLu6iKueqBKXg9/uOOlb/3gbpoBXpRlS6mkL210rCbjLX53cAfTe6WCH/5v9aANwFmgBE3dhh+yAlkXV5Wzu/TH5fxL4GzSIzJx+YP0hAAAAAElFTkSuQmCC">Clica aqui para abrires uma imagem codificada com a <b>codificação Base64</b></a>
             

      Mostrar Mais
   2. Clica aqui para abrires um texto que está na href

      <a href="data:text/plain,Bem-vindos aqui ao meu blogue"> Clica aqui para abrires um texto que está na href</a>
             

   3. Clica aqui para abrires um ficheiro HTML, cujo conteúdo está na href

      <a href="data:text/html,%3Cb%3EBem-vindos%3C%2Fb%3E%20aqui%20ao%20meu%20blogue" target="_blank">Clica aqui para abrires um ficheiro HTML, cujo conteúdo está na href</a>
             

      De notar que é recomendado que as URLs de dados sejam codificadas para evitar comportamentos inesperados.
      Além da já referida codificação Base64, também podem utilizar a codificação de URL.

7. <a href="song.mp3#t=10,20">

   Ligações para partes específicas de um ficheiro de média, seja áudio ou vídeo.
   No exemplo [song.mp3#t=10,20] cria-se uma ligação para um áudio em que a reprodução começa aos 10 segundos e termina aos 20 segundos.

   1. Para exemplo prático, em vez duma ligação, podem testar no leitor de áudio em que somente toca o fragmento entre os 10 e os 20 segundos:

   2. Até nos vídeos do YouTube se pode utilizar uma versão deste esquema:Clica aqui para veres um fragmento dum vídeo que começa aos 25 segundos e termina aos 55 segundos.

      <a href="https://www.youtube.com/embed/FiBRAPOHgWY?start=25&end=55">Clica aqui para veres um fragmento dum vídeo que começa aos 25 segundos e termina aos 55 segundos.</a>
             

8. <a href="javascript:void(0)">

   Não faz nada.
   Utilizar este conteúdo numa ligação somente serve para impedir que a mesma nos leve para outra página e garante que o comportamento de rolar para o cimo da página seja cancelado.

   Isto é o chamado Javascript na URL, e neste caso em que o objectivo é essencialmente criar uma ligação com JavaScript nulo, existem outras variações com o mesmo resultado:

   <a href="javascript:void(0)">
   <a href="javascript:{}">
   <a href="javascript:null">
          

   Agora convém mencionar que embora este tipo de ligação e o texto sejam inofensivos porque não fazem nada, esta prática é desencorajada porque viola a Política de Segurança de Conteúdo.
   Umas razões é que este método pode também ser utilizado para injectar código malicioso.

   1. Clica aqui, onde tem href="javascript:void(0)" para efeitos de teste.

Como devem ter reparado, mantive a coisa o mais simples possivel.
Mas caso tenha alguma questão, podes deixar a tua(s) dúvida(s) nos comentários.

E por hoje é tudo. ;)

Até Breve. :-F

Queres ler outro artigo ao calhas?