O que é quando um link tem uma cerquilha “#”?

93

Inspecionei alguns sites e eles têm um sinal de cerquilha (#) no url. O que isso faz?

 <a href="#" >Link name</a>
html Luke101
fonte

Respostas:

105

É um "fragmento" ou "âncora nomeada". Você pode usar para vincular a parte de um documento. Normalmente, quando você cria um link para uma página, o navegador o abre na parte superior da página. Mas você vincula a uma seção no meio do caminho, pode usar o fragmento para vincular a esse título (ou qualquer outro).

Se não houver nenhuma <a name="whatever"/>tag na página, o navegador apenas criará um link para o topo da página. Se o fragmento estiver vazio, ele também será vinculado ao topo da página.

Para um fragmento única <a href="#">Link name</a> , então isso é apenas um link para o topo da atual página.

Você costuma ver esse tipo de link usado em conjunto com o javascript. O HTML compatível com os padrões requer um hrefatributo, mas se você planeja lidar com a solicitação com javascript, "#" serve como um marcador razoável.

Dean Harding
fonte
1
+1 Embora o termo oficial seja um fragmento de URL, não uma "referência de hash": w3.org/TR/WD-html40-970708/htmlweb.html#h-4.1.1
Jason Hall
Sim, mudei para "fragmento" na minha resposta, porque é o que a maioria das pessoas usa. Eu nunca soube que tinha um nome "oficial" :)
Dean Harding
2
Por que os navegadores tratam isso como 'ir para o topo da página': Tecnicamente, você mudou a página. Depois de clicar no link, você perceberá que o # é realmente adicionado ao URL na barra de endereço e, se você clicar no botão Voltar, ele o removerá novamente. Eu não diria que é um link para parte de um documento, mais um link para um local dentro do documento. Caso contrário, basicamente a mesma coisa que eu estava digitando ...
animuson
Um URI que termina com # é permitido pela sintaxe genérica e pode ser considerado uma espécie de fragmento vazio. Em tipos de documentos MIME, como text / html ou qualquer tipo XML, não são permitidos identificadores vazios para corresponder a esta construção sintaticamente legal. Os navegadores da Web geralmente exibem a parte superior do documento para um fragmento vazio. - en.wikipedia.org/wiki/Fragment_identifier
IcyBrk
Também por "Se não existir tal representação, em seguida, a semântica do fragmento são considerados desconhecido e são eficazmente sem restrição". A partir de RFC3986 ( tools.ietf.org/html/rfc3986#page-24 )
IcyBrk
23

... apenas para adicionar algumas dicas úteis extras.

Você pode acessá-lo e alterá-lo document.location.hashem JavaScript.

Ele pode apontar para uma âncora nomeada (por exemplo <a name="top"></a>) ou para um elemento com um id correspondente (por exemplo <div id="top"></div>).

Ver um por conta própria (por exemplo <a href="#" onclick="pop()">popup</a>) geralmente significa que um link está sendo usado exclusivamente para executar o JavaScript. Esta é uma prática ruim.

Qualquer aelemento deve ter um hrefque aponta para um recurso válido. Se não existir, considere usar outro elemento, como button.

alex
fonte
1
Esse é um bom ponto sobre isso, não é uma prática particularmente boa ... mas só porque não é bom não significa que você não o encontrará sendo usado assim em todo o lugar :)
Dean Harding
1
@alex, se for uma prática ruim, diga-nos qual seria a boa prática usar.
Ryan Lundy
@Kyralessa Estava bem ali no próximo parágrafo. De qualquer forma, fiz uma edição tão esperançosamente que está mais clara.
alex
2
@alex, presumivelmente uma razão pela qual as pessoas estão usando links em vez de botões é que eles querem a aparência de links. Que tal um link para uma página que descreve como fazer um botão parecer um link? Por exemplo , teste do botão HTML
Ryan Lundy
1
@alex, não mais do que está dizendo que usar # em um link é uma prática ruim. Tudo o que o OP pediu é o que ele faz.
Ryan Lundy
11

# indica um link para uma âncora.

Achei que também mencionaria outra coisa:

Usar '#' como href para um link que ativa o JavaScript é ruim porque rola a página para o topo - o que provavelmente não é o que você deseja. Em vez disso, use javascript:void(0).

Nathan Osman
fonte
+1 por mencionar que clicar nesses links força a página a rolar para o topo.
Chris Calo
4
Você não precisa mais de uma âncora. A partir do HTML5 (e talvez do HTML 4), qualquer elemento com uma tag <id> pode ser direcionado por um identificador de fragmento. Ver documentos HTML5: whatwg.org/specs/web-apps/current-work/multipage/…
Basil Bourque
2
Não use javascript:void(0)nenhum dos dois - use um buttonse não for um link.
alex
10

O sinal de libra ( #) indica para localizar uma âncora na página. Por exemplo, se você incluir isso em algum lugar da página:

<a name="foo"></a>

ou, mais recentemente:

<div id="foo">*part of page*</div>

e depois você clicar em um link da página que contém o href #foo, ele irá navegar até a âncora com o nome ou divcom o id foo.

No entanto, se você tiver apenas o href #, ele o levará ao topo da página.

ElectroBit
fonte
2

Isso leva de volta à própria página. É freqüentemente usado com links que realmente executam algum JavaScript.


fonte