O que é href = "#" e por que é usado?

Em muitos sites, vejo links que possuem href="#". O que isso significa? Para que isso é usado?

Sobre os hiperlinks:

O principal uso de tags âncora - <a></a>- é como hiperlinks . Isso basicamente significa que eles te levam a algum lugar. Os hiperlinks requerem a hrefpropriedade, porque especifica um local.

Cerquilha:

Um hash - #em um hiperlink especifica um ID do elemento html no qual a janela deve ser rolada.

href="#some-id"rolaria para um elemento na página atual, como <div id="some-id">.

href="https://site.com/#some-id"iria site.come rolaria para o ID nessa página.

Role para cima:

href="#"não especifica um nome de ID, mas possui um local correspondente - a parte superior da página. Clicar em uma âncora com href="#"moverá a posição de rolagem para o topo.

Veja esta demonstração.

Esse é o comportamento esperado de acordo com a documentação w3.

Marcadores de hiperlink:

Um exemplo em que um espaço reservado para hiperlink faz sentido está nas visualizações de modelo. Em demonstrações de uma página para modelos, eu já vi muitas vezes <a href="#">para que a tag anchor seja um hiperlink, mas não vá a lugar algum. Por que não deixar a hrefpropriedade em branco? Uma hrefpropriedade em branco é na verdade um hiperlink para a página atual. Em outras palavras, isso causará uma atualização da página. Como discuti, href="#"também é um hiperlink e causa rolagem. Portanto, a melhor solução para espaços reservados para hiperlinks é realmente. href="#!"A idéia aqui é que, esperançosamente, não exista um elemento na página com id="!"(quem faz isso !?) e, portanto, o hiperlink não se refere a nada - para que nada aconteça.

Sobre as tags âncora:

Outra pergunta que você pode estar se perguntando é: "Por que não deixar a propriedade href desativada?". Uma resposta comum que ouvi é que a hrefpropriedade é necessária, portanto "deve" estar presente nas âncoras. Isto é falso! A hrefpropriedade é necessária apenas para que uma âncora seja realmente um hiperlink! Leia isso no w3. Então, por que não deixar para os espaços reservados? Os navegadores renderizam estilos padrão para elementos e alteram o estilo padrão de uma marca de âncora que não possui a propriedade href. Em vez disso, será considerado como texto normal. Ele até altera o comportamento do navegador em relação ao elemento. A barra de status (parte inferior da tela) não será exibida ao passar o mouse sobre uma âncora sem a propriedade href. É melhor usar um valor de href do espaço reservado em uma âncora para garantir que ele seja tratado como um hiperlink.

Veja esta demonstração demonstrando diferenças de estilo e comportamento.

Colocar o símbolo "#" como href para algo significa que ele aponta não para um URL diferente, mas para outro ID ou tag de nome na mesma página. Por exemplo:

<a href="#bottomOfPage">Click to go to the bottom of the page</a>
blah blah
blah blah
...
<a id="bottomOfPage"></a>

No entanto, se não houver identificação ou nome, será "não onde".

Aqui está outra pergunta semelhante feita ao HTML Anchors com 'name' ou 'id'?

É um link que vincula essencialmente a lugar nenhum (apenas adiciona "#" ao URL). É usado por vários motivos diferentes. Por exemplo, se você estiver usando algum tipo de JavaScript / jQuery e não quiser que o HTML real seja vinculado a qualquer lugar.

Também é usado para âncoras de página, usadas para redirecionar para uma parte diferente da página.

Infelizmente, o uso mais comum <a href="#">é de programadores preguiçosos que desejam elementos codificados por javascript sem hiperlink clicáveis ​​que se comportam como âncoras, mas não podem ser usados ​​para adicionar estilos cursor: pointer;ou :hoverestilos a uma classe para seus elementos sem hiperlink e são adicionalmente preguiçoso demais para definir hrefa javascript:void(0);.

O problema é que um <a href="#" onclick="some_function();">ou outro acaba inevitavelmente com um erro javascript, e uma âncora com um erro javascript onclick sempre acaba seguindo o seu href. Normalmente, isso acaba sendo um salto irritante para o topo da página, mas, no caso de sites que usam <base>, <a href="#">é tratado como <a href="[base href]/#">, resultando em uma navegação inesperada. Se algum erro registrável estiver sendo gerado, você não os verá no último caso, a menos que ative os logs persistentes.

Se um elemento âncora é usado como um não-âncora que deve ter o seu hrefconjunto para javascript:void(0);por causa da graciosa degradação.

Acabei de perder dois dias depurando um redirecionamento aleatório de página inesperado que deveria simplesmente atualizar a página e finalmente a localizei para uma função que aumenta o evento click de um <a href="#">. Substituindo o #com javascript:void(0);fixo.

A primeira coisa que estou fazendo segunda-feira é limpar o projeto de todas as instâncias de <a href="#">.

Listas não ordenadas são frequentemente criadas com a intenção de usá-las como menu, mas um liitem da lista é texto. Como o liitem da lista é texto, o ponteiro do mouse não será uma seta, mas um "I cursor". Os usuários estão acostumados a ver um dedo apontando para um ponteiro do mouse quando algo é clicável. O uso de uma marca de âncora adentro da limarca faz com que o ponteiro do mouse mude para um dedo apontador. O dedo indicador é muito melhor para usar a lista como menu.

<ul id="menu">
   <li><a href="#">Menu Item 1</a></li>
   <li><a href="#">Menu Item 2</a></li>
   <li><a href="#">Menu Item 3</a></li>
   <li><a href="#">Menu Item 4</a></li>
</ul>

Se a lista estiver sendo usada para um menu e não precisar de um link, um URL não precisará ser designado. Mas o problema é que, se você deixar de fora o hrefatributo, o texto na <a>tag será visto como texto e, portanto, o ponteiro do mouse retornará ao cursor I. O cursor em I pode fazer o usuário pensar que o item de menu não é clicável. Portanto, você ainda precisa de um href, mas não precisa de um link para qualquer lugar.

Você pode usar muitas tags divou ppara uma lista de menus, mas o ponteiro do mouse também seria um cursor I para eles.

Você pode usar muitos botões empilhados uns sobre os outros para obter uma lista de menus, mas a lista parece ser preferível. E é provavelmente por isso href="#"que o que aponta para lugar nenhum é usado nas tags âncora dentro das tags da lista.

Você pode definir o estilo do ponteiro em CSS, de modo que essa é outra opção. O href="#"lugar nenhum pode ser apenas a maneira preguiçosa de definir algum estilo.

O problema com o uso de href = "#" para um link vazio é que ele o levará ao topo da página, que pode não ser a ação desejada. Para evitar isso, para navegadores mais antigos ou doctypes não HTML5, use

<a href="javascript:void(0)">Goes Nowhere</a>

Até onde eu sei, geralmente é um espaço reservado para links com algum JavaScript anexado a eles. O ponto principal do link é servido executando o código JavaScript; navegadores com suporte a JS ignoram o destino do link real. Se o navegador não suportar JS, a marca de hash basicamente transforma o link em um não operacional. Veja também JavaScript discreto .

Como algumas das outras respostas apontaram, o aelemento requer um hrefatributo e #é usado como um espaço reservado, mas também é um artefato histórico.

Da Rede de Desenvolvedores Mozilla :

href

Esse era o único atributo necessário para âncoras que definem um link de origem de hipertexto, mas não é mais necessário no HTML5. Omitir esse atributo cria um link de espaço reservado. O atributo href indica o destino do link, um URL ou um fragmento de URL. Um fragmento de URL é um nome precedido por uma marca de hash (#), que especifica um local de destino interno (um ID) no documento atual.

Além disso, de acordo com a especificação HTML5 :

Se o elemento a não tiver atributo href, o elemento representará um espaço reservado para onde um link poderia ter sido colocado, se fosse relevante, consistindo apenas no conteúdo do elemento.

O atributo href define a URL do recurso de um link. Se a marca âncora não tiver a marca href, ela não se tornará um hiperlink. O atributo href tem os seguintes valores:

1. Absolute path: move to another site like href="http://www.google.com"
2. Relative path: move to another page within the site like herf ="defaultpage.aspx"
3. Move to an element with a specified id within the page like href="#bottom"
4. href="javascript:void(0)", it does not move anywhere.
5. href="#" , it does not move anywhere but scroll on the top of the current page.
6. href= "" , it will load the current page but some browsers causes forbidden errors.

Note: When we do not need to specified any url inside a anchor tag then use 
<a href="javascript:void(0)">Test1</a>