Why is a hashtag used to bind an achore link?

Question

I often see on other sites and in tutorials that when the link has a big purpose, and not just a link, it often has hashtag ( # ) as the value of the href attribute. I am creating a series of lists in lists in a project that I am currently working on, and I am tempted to do this myself, but I am afraid that this could potentially complicate the systems that other developers in the team are working on to have this hashtag appear in the address line after clicking.

Are there any flaws to hide href this way? I guess this is not due to the popular use of this method, but is it possible that hashtag can ruin a function that uses GET ?

Answer 1

No worries, the “hash tag” is suitable for use, has been part of the standard for a decade and does not affect GET. An anchor tag <a> used for this purpose.

You can use it to create “jump links” to go to different parts of the document (bindings, as is done on the pages of the HTML specification document themselves), or as a “hash band” in combination with javascript.

What you should NOT do is use the <a> tag only to get the pointer pointer for no reason. However, if a thing does something when you click it (usually why you hover over something), either by changing the hash, link to a new document, or by launching the javascript function, there is no reason not to use the anchor tag and this is not a bad practice.

When you see an anchor with "#" only as href , this usually indicates that the developer intends to apply a javascript listener to the element. An empty anchor acts as a do-nothing backup if the client does not have javascript available. In this case, the user clicks on the link and nothing happens. If you use progressive boosting principles, then instead you can use the equivalent URI without JavaScript instead.

Documentation

• HTML Links and Bindings - http://www.w3.org/TR/html401/struct/links.html
• onhashchange on MDN - https://developer.mozilla.org/en-US/docs/Web/API/window.onhashchange

Answer 2

As stated in the comments, do not include HTML markup solely for visual "beauty." This is a CSS task, and you need to learn specific issues . For HTML / CSS: HTML = information, CSS = presentation. Ask yourself what next time you will face a similar problem. Personally, I would create a CSS class like this :

 .handy{ cursor: pointer; } 

Then add a class to each element you need:

 <ul id = "menu"> <li></li> <li class = "handy"></li> </ul> 

Another way to do this, depending on your case, is to write CSS as follows:

 #menu li { cursor: pointer; }