Bad code Bad code
<a href="#" onclick="modal.open()">Login</a>
Issues and how to fix them Issues and how to fix them
- If the
aelement has an
hrefattribute, it represents a link to another resource like a page or a PDF document.
buttonelement with the type button is more suitable because it has no default behaviour and it’s designed to trigger actions on user input.
Good code Good code
Solution #1: Use a button element Solution #1: Use a button element
<button type="button" onclick="modal.open()">Login</button>
Since the only purpose of this element is to trigger an action on the same page instead of navigation; the
<button></button> element is the semantically correct element to use.
Solution #2: Add a valid href value to the login form Solution #2: Add a valid href value to the login form
<a href="/login" onclick="modal.open()">Login</a>
Another solution is to add a
href value to a location where the same actions as the modal can be performed.