3

Qual a diferença entre # e #! no atributo href de elementos <a>?

<a href="#">link 1</a>
<a href="#!>link 2</a>

OBS: estou usando JQuery e Materialize

2 Respostas 2

7

Podemos considerar que é um hack para criar um elemento clicável sem gerar efeitos colaterais indesejáveis. Neste caso, se você pressionar o link 1, que define href="#", você será movido para o início da página; já se pressionar o link 2, que define href="#!", não, pois naturalmente o navegador irá buscar um elemento que possui id="!" como âncora e, visto que este não existe na página, o usuário não será movido.

Veja um exemplo:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at eros id urna dictum tempus condimentum in sem. Aenean lobortis justo nulla, sagittis semper enim tincidunt ut. Maecenas sed lectus at tortor semper pretium. Phasellus molestie facilisis sem, vitae rutrum ex placerat in. Fusce quis lorem pretium, laoreet justo vitae, sollicitudin diam. Phasellus semper enim felis. Suspendisse at imperdiet erat, dignissim lobortis sem. Suspendisse sit amet molestie augue. Duis tempor ante urna, non gravida nulla suscipit eu. Integer tempor luctus felis non porttitor. Suspendisse luctus pulvinar feugiat. Integer nisl ipsum, interdum sed pulvinar id, venenatis eu felis. Ut eleifend varius eros, a porttitor augue.</p>
<p>Sed sit amet sagittis elit. Proin lobortis condimentum nunc, quis lacinia dui iaculis a. Vivamus vestibulum metus sit amet erat hendrerit porttitor. Quisque ac tortor urna. Integer nec elit et libero bibendum vestibulum. Donec in mi tellus. Aliquam euismod, turpis vehicula condimentum pretium, neque sem faucibus nunc, vel mattis nunc lectus ac odio. Donec tempus velit nec porttitor efficitur. Nulla enim enim, tempus nec consectetur id, mollis ac felis. Vestibulum lobortis iaculis justo, quis pellentesque mauris tincidunt tempor.</p>
<p>Pellentesque iaculis lorem vitae lacus cursus sagittis. Morbi nec leo vitae augue feugiat iaculis at non ex. Phasellus sed mattis urna. Fusce hendrerit luctus fermentum. Nulla pretium placerat arcu eget eleifend. Integer viverra fermentum ornare. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas in magna a neque tristique porta. Aenean ac elementum lorem, a malesuada ligula. Donec efficitur eleifend sapien. Pellentesque eget tellus sit amet neque viverra ultrices condimentum ultrices urna. Sed vel enim sit amet urna mollis volutpat gravida a sapien.</p>
<p>Nam eu accumsan magna, et gravida ex. Ut sed justo arcu. Proin id gravida elit, id semper lacus. Nulla vehicula vehicula tellus sed commodo. Vivamus vulputate nisi id vulputate bibendum. Integer iaculis, nisl et dapibus scelerisque, lectus leo facilisis leo, nec tempus nibh odio ut velit. Fusce faucibus, dolor in aliquet vestibulum, dolor nisi aliquam enim, eu placerat nisi justo et enim. Pellentesque lectus magna, efficitur a turpis nec, egestas sodales nibh. Duis in sagittis neque, id pellentesque felis. In tellus enim, egestas et auctor ut, commodo sit amet sem. Morbi varius feugiat venenatis. Nulla posuere sodales urna, sed scelerisque turpis iaculis non. Phasellus hendrerit leo mauris, vitae semper nisl facilisis sed. Duis in facilisis mauris. Nam ullamcorper condimentum lectus sed rutrum. Ut cursus odio in arcu suscipit interdum.</p>
<p>Duis eleifend, orci eget maximus mattis, erat nunc bibendum nisl, sit amet porttitor elit elit eu nisi. Nunc quis ligula aliquam, vestibulum massa nec, consectetur enim. Etiam gravida scelerisque ornare. Donec fermentum nibh et pulvinar sodales. Suspendisse potenti. Sed porttitor ipsum lorem. Nullam ornare convallis tellus, at condimentum magna rutrum a. Nam sit amet ipsum et mauris cursus vulputate id non enim. Aenean in sapien id ligula tincidunt cursus non id nulla. Vestibulum non tempor urna.</p>

<a href="#">Link 1</a>
<a href="#!">Link 2</a>

Isso obviamente quando considerado que tal efeito colateral não é resolvido por meio de JavaScript.

Links assim são geralmente utilizados quando sua função não é redirecionar o usuário à outra página, mas sim abrir um modal, disparar um evento no JavaScript, ou algo semelhante. Sendo assim, em quase todos os casos é mais semântico utilizar o elemento button ao invés de a. Não só mais semântico como também não apresenta o efeito colateral supracitado.

5

O simbolo #, chamado de hash, é utilizado principalmente para indicar elementos com o atributo id="", faça o teste:

<a href="#!">Foo bar</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<h3 id="!">Chegou</h3>
<h3 id="">Não valido</h3>
<a href="#">Voltar ao topo</a>

Ao clicar no link irá até o elemento h3 sem paginar, ele rola "sozinho" a página.

Já o hash vazio href="#" irá levar novamente ao topo, pois um elemento com id="" será desconsiderado.

No entanto o uso do ! não tem haver com o HTML em si, mas sim provavelmente com um framework chamado AngularJS, conforme dito em:

$location:

Due to aa077e8, the default hash-prefix used for $location hash-bang URLs has changed from the empty string ('') to the bang ('!'). If your application does not use HTML5 mode or is being run on browsers that do not support HTML5 mode, and you have not specified your own hash-prefix then client side URLs will now contain a ! prefix. For example, rather than mydomain.com/#/a/b/c the URL will become mydomain.com/#!/a/b/c.

Traduzindo:

o prefixo hash padrão usado para o hash-bang URLs no $location mudou de sequencia vazia ('') para o bang ('!').

Se o seu aplicativo não usa o modo HTML5 ou estiver sendo executado em navegadores que não suportam o modo HTML5, e você não especificou seu próprio prefixo hash, os URLs do lado do cliente agora conterão um prefixo "exclamação".

Por exemplo, em vez de mydomain.com/#/a/b/c, o URL se tornará mydomain.com/#!/a/b/c

Ou seja, fora do framework provavelmente não faça muito sentido usá-la, a não ser que você deseje, isso não influencia em nada no HTML a não ser que você decida que deva, já para o AngularJS é parte de como ele funciona.

Note que o #! no AngularJS é somente necessário em navegadores que não suportam a função history.pushState da API History

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .