HTML <a> vs <button>

Let’s compare of HTML <a> and <button> elements:

Get nana 🧙🏻‍♀️’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

<a> (Anchor) Element:

• Primary purpose: Creating hyperlinks
• Navigates to new pages or locations within a page
• Default styling: Inline element, often underlined and coloured
• Semantic meaning: Represents a link to another resource

<button> Element:

• Primary purpose: Triggering actions or events
• Used for interactive functionality within the current page
• Default styling: Inline-block element with button-like appearance
• Semantic meaning: Represents an interactive button

Key differences:

1. Navigation vs. Action: <a> for navigation, <button> for on-page actions
2. Accessibility: <button> is more suitable for interactive elements
3. Styling: <button> has built-in states (e.g., :hover, :active)
4. Keyboard interaction: <button> is natively focusable and responds to Enter/Space

Generally, I try to use the HTML tag in the most “semantic way” and useful way:

<a> tag: a is for "anchor", I use it when the button is a link to a content on the page or external content;

<div> tag: this is a simple container. I use it when I have to do simple buttons without any specific job but really custom style(simple animation, transition, open modal, etc). This is the jolly.

<button> tag: according with W3, this is the standard tag to create buttons on the page, so use it when you need an action like onClick().

<input type="button"> tag: is equal to the button tag, but you need it for form submission, because browser that submit for with <button> can submit different values. I use it generally on form.

🔗Reference answered by Daniele Petrarolo

<!-- Example of <a> usage -->
<a href="https://www.example.com">Visit Example Website</a>

<a href="#section-2">Jump to Section 2</a>

<a href="contact@example.com">Email Us</a>

<!-- Example of <button> usage -->
<button type="button" onclick="submitForm()">Submit</button>

<button type="submit">Send</button>

<button type="reset">Reset Form</button>

<!-- Comparison in a practical scenario -->
<div class="product-card">
  <h2>Product Name</h2>
  <p>Product description goes here.</p>
  <a href="product-details.html">View Details</a>
  <button onclick="addToCart()">Add to Cart</button>
</div>That’s a wrap

✨📣 Frontendly.io is helping people become a really good frontend engineer 🌿, practice with real-world scenarios, and level up your front-end skills. Check it out! 🚀