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

Question

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

Navigation

#1 by (7 votes)
#2 by (5 votes)

3

What's the difference between # and #! in the href attribute of elements <a> ?

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


                                            
                                                            jquery
                                                            html5
                                                            materialize
                                                    
                                        
                    
                        asked by  anonymous                          06.09.2017 / 17:54



        
            
                2 answers
                
            
            
                            

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

 See 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 you consider that such a side effect is not resolved through JavaScript. 

 Links like this are usually used when your role is not to redirect the user to another page, but to open a modal, trigger an event in JavaScript, or something similar. Thus, in almost all cases it is more semantic to use the element    button     instead of    a    . Not only more semantic but also does not present the aforementioned side effect. 
    
                                    
                                    
                                                                                                                      06.09.2017 / 18:06
                                    
                                
                            
                        
                                                                                    
                                                                                                            
                            
                                
                                    
                                    5
                                    
                                
                            
                            
                                
                                    
                                        
 The symbol    #    , called hash, is used mainly to indicate elements with the id=""  attribute, 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    h3     element without paging, it rolls the page "alone." 

 Since the empty hash    href="#"     will lead back to the top, since an element with    id=""     will be disregarded. 

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


  link  


    $ 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 it 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     has changed from empty string (    ''    ) to bang (    '!'    ). 
  
   If your application does not use HTML5 mode or is running in browsers that do not support HTML5 mode, and you did not specify your own hash prefix, 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, this does not influence anything in the HTML unless you decide that it should already be for AngularJS is part of how it it works. 

  Note  that    #!     in AngularJS is only required in browsers that do not support the history.pushState    API History   
    
                                    
                                    
                                         
                                        

                                                                                  06.09.2017 / 18:08
                                    
                                
                            
                        
                                                            
                            
        

                    
        

         
                            Difference between syntax of properties in C # [duplicate]
                                        How to compile C / C ++ for Linux / Mac OS on a Windows?

score 7 · Accepted Answer

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

See 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 you consider that such a side effect is not resolved through JavaScript.

Links like this are usually used when your role is not to redirect the user to another page, but to open a modal, trigger an event in JavaScript, or something similar. Thus, in almost all cases it is more semantic to use the element button instead of a . Not only more semantic but also does not present the aforementioned side effect.