A banal question, what are the correct tags to use for buttons?

Question

Layout

I use <a href='#!'>for buttons that open modal windows, I prescribe the path, href='#!', so that the page does not reload on click, as is the case with an empty field. Maybe you need to use a button instead of a link? But it seems like without a form there will be a semantic error. How to do it right and who does it how .. I had such a question before going to bed)

Answer 1

When you use a link, your click on it is recorded in your browser history. Accordingly, it becomes possible to use the buttons back and forth to walk through this story.
Links should be used for cases where you have provided the ability for the user to click the "back" button in the browser. Those. when developing a site, you must provide for the following scenario: the user opened a modal window, then closed it, and pressed back - if you have a link, then the modal window should open.
If you don't want this behavior, use buttons. A button without a form - I don't see any error here.

Answer 2

Consider 2 scenarios:
If, with js disabled , the content of the mod.window should be available, we make the call of the mod.window an anchor link <a href="#id">, because mod.window should initially be in the stream (and hidden using js), add the mod.window block to the end of the page. For example, for a landing page, the application form is important and it should always be available.
If the mod.window should not be available without js, we do <button>it and exclude it from the flow, for example, through display:none
If, with js disabled, the mod.window should lead to another page (for example, a login form) - we make a link to another page, and in js mod. windows prevent event by default.
If anything, it hrefis an optional link attribute, so you can not write it at all.