Today's post is all regarding buttons vs anchors and after you ought to use that part.
I'm certain we've all used the incorrect part for one purpose or another however it's very necessary to think about the HTML components you're victimised about and you use the one that creates sense.
Buttons are used to trigger actions. Anchors are for navigating between URLs. That is the main thing to remember 😅
Semantic HTML has come a long way but I have seen many people using the button and anchor tag incorrectly in the production code. This post will help you decide which element you should use.
Problem the <div>
The actual problem is not with the <div> it's with you. The <div> is for layout not for clicking. Both buttons and anchor are specifically designed for clickable elements.
Try not to add clickable interactivity to elements that sh shouldn't have - like a <div>. There may be some minor edge cases but try to avoid if you can!
EXAMPLE:
If you need to trigger an action or interaction on the same page use the button element.
<!-- Example use ina form-->
<form action="POST">
<label>Email: </label>
<input type="email" placeholder="Enter your email here" />
<button type="submit">Send</button>
</form>
<!--Example use with JS-->
<button type="button" onclick="triggerFunction()">
Show modal
</button>
Use cases:
- Forms
- Show/Hide elements
- Gallery interactions
- Modal triggers
Anchors for navigation
If you would like to navigate the user to a distinct URL(on your website or externally) use the anchor element.
<!--Example-->
<nav>
<a href="/">Home</a>
<a href="/blog.html">Blog</a>
<a href="/about.html">About</a>
<a href="/contact.html">Contact</a>
</nav>
<!--For external links-->
<a href="https://rahulism.tech" target="_blank">
RAHULISM's BLOG
</a>
Use cases:
- Site navigation
- Download resources
- Referral links
- Off-site links
So, I guess now you got to know something you were doing wrongâš¡.
ðŸ¤Thanks For Reading | Happy Codingâš¡
Top comments (1)
I find the confusion stems from forms which historically perform both an action (submit data to the server) and a navigation (go to confirm/validate page)