Never Use Onclick for Navigation
onclick events for navigation instead of
<a href> links.
There's (hopefully) only a very small group of developers actually doing this, but I still see this too much, to write a post about it.
What's the problem, you might ask. Well, have you tried right-clicking on such an element, and clicking "Open link in new tab"? Guess what, it doesn't work. The browser doesn't know it's a link.
- CTRL + left clicking, to open in a new tab.
- Clicking the middle mouse button, to open in a new tab.
- Holding the link down on a smartphone, to copy or share the URL.
The solution is easy: Always use
<a href> elements for navigation links.
So When Can I Use Onclick Instead of
If the link (or button) URL should NOT be opened in a new tab or copied/shared.
If you're making a webapp or a confirm/alert for something the user is doing correct (or wrong), like submitting a form, it's perfectly fine to use
onclick events, since opening in a new tab, or copying the link wouldn't make sense.
Single Page Application
If you're developing a SPA, you probably want both
<a href="">, so the user can copy and share the URL, and still be able to get the scroll/fade effects when clicking.
SEO & Accessibility
Don't do this just to please me or your users, this also makes it easier for crawlers and screen-readers to find your links.