What is the difference between # and #! in HTML 5?

Question

What is the difference between # and #! in the href element attribute <a>?

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

NOTE: I am using Jquery and Materialize

Answer 1

We can call it a hack to create an element clickable without generating undesirable side effects. In this case, if you press the link 1, defining href="#", you will be moved to the top of the page; already press the link 2, defining href="#!", no, because of course the browser will fetch an element that has id="!" as anchor and, since this does not exist on the page, the user will not be moved.

Take an example:

<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>

This is obviously when considered that such side effect is not solved through Javascript.

Links like this are usually used when their function is not to redirect the user to the other page, but to open a modal, trigger an event in Javascript, or something similar. Therefore, in almost all cases it is more semantic to use the element button instead of a. Not only more semantic but also does not have the aforementioned side effect.

Answer 2

The symbol #, called hash, is mainly used to indicate elements with the attribute id="", take the test:

<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>

Clicking on the link will go to the element h3 without paging, it rolls "alone" the page.

Already the empty hash href="#" will take you back to the top as an element with id="" will be disregarded.

In the however the use of ! does not have to do with the HTML itself, but probably with a framework called Angularjs, as stated in:

• https://docs.angularjs.org/guide/migration#commit-aa077e8

$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.

Translating:

the default hash prefix used for hash-bang Urls in $location empty sequence change ('') to the bang ('!').

If your application does not use HTML5 mode or is running in browsers that do not support HTML5 mode, and you have not specified your own hash prefix, the client-side Urls will now contain an "exclamation prefix".

For example, instead of mydomain.com/#/a/b/c, the URL will become mydomain.com/#!/a/b/c

That is, outside the framework probably does not make much sense to use it, unless you want, it does not influence anything in HTML unless you decide it should, for Angularjs is part of how it works.

Note that the #! Angularjs is only needed in browsers that do not support the function history.pushState of API History