What Is Href="#" and Why Is It Used

what does a href=#! do?

Notice in the code you asked about that you also have the data-target="#mob-commercial".

So what is happening? the href="#!" is used as a hack to call a javascript function that uses the data-target attribute when pressed on the <a> tag instead of the <button> tag which is usually used.

What does href expression a href=javascript:;/a do?

An <a> element is invalid HTML unless it has either an href or name attribute.

If you want it to render correctly as a link (ie underlined, hand pointer, etc), then it will only do so if it has a href attribute.

Code like this is therefore sometimes used as a way of making a link, but without having to provide an actual URL in the href attribute. The developer obviously wanted the link itself not to do anything, and this was the easiest way he knew.

He probably has some javascript event code elsewhere which is triggered when the link is clicked, and that will be what he wants to actually happen, but he wants it to look like a normal <a> tag link.

Some developers use href='#' for the same purpose, but this causes the browser to jump to the top of the page, which may not be wanted. And he couldn't simply leave the href blank, because href='' is a link back to the current page (ie it causes a page refresh).

There are ways around these things. Using an empty bit of Javascript code in the href is one of them, and although it isn't the best solution, it does work.

What does href stand for?

It stands for Hypertext Reference

From the source written by Tim Berners-Lee himself.:

"Help" is all that is displayed, with some indication that it is an
option. If the user choses (clicks a mouse on, choses by number
depending on which client he has) then the client asks the server for
/HEPDATA/HELP. ("A" is for "anchor", "HREF" is for "hypertext
reference")

What if I use #! instead of # in href of anchor tag a?

It seems your goal is to create something that the user can click on in order to trigger some JavaScript and you don't want side effects (like navigating to the top of the page).

is it legal?

It is not semantically correct. Links should be links.
It is a hack: You are linking to the element with id="!" and depending on the error recovery that happens when that element doesn't exist.
It is allowed under the rules of what constitutes valid HTML.
It is probably OK according to the various bits of accessibility legislation about the work which don't generally care if something works without JavaScript

The correct way to present a clickable control which exists only to bind JavaScript to is to use a button.

<button type="button">Click here</button>

You can apply CSS to make it look however you like though, so don't let "But it I want it to look like a link" stop you.

A more robust approach would be to use a server side fallback (i.e. a form submission or a link) and to cancel the default behaviour of the control by calling the preventDefault method of the event object.

what does link href=# do?

Probably some stylesheet that is to be loaded later on.