The difference between a link and a button in HTML

On the web, links AND buttons exist for a reason! Each of these HTML elements has its own context of use. In this article, I'll explain :

Why it's important to know when to use a link or button in HTML.
The "technical" difference and best practices for using links and buttons.
How to get around the problem of "fake" button elements if you use the Webflow CMS.

1. Why is it important to understand the difference?

If you want to implement web best practices on your website, there are at least three good reasons to use"a " vs"button" semantics correctly:

1.1 Improving accessibility:

Enhanced user experience for people using assistive technologies.
Easy keyboard navigation, essential for users unable to use a mouse.

1.2 Optimizing HTML semantics :

Better understanding of content by search engines, which can improve natural search engine optimization (SEO).

1.3 Compliance with web standards:

Compliance with W3C standards, ensuring compatibility with different browsers and devices (computers, tablets, mobiles).

In short, the correct use of "a " and "button" elements improves the accessibility of your website, the quality of your semantics and conforms to web standards. At Digidop, a webflow agency with expertise in SEO, we're convinced that SEO is also a matter of "common sense", and that integrating these best practices on your site can have a positive impact on your site's indexing on search engines like Google.

Learn more about SXO and how SEO works "logically".

2. Link vs Button: The simplified guide

ℹ️ Note: In this section, I'll skip the "technical" aspects of using the various elements (ahref, focus, anchor, etc.), which are generally integrated by default in all modern CMS such as Webflow, Wordpress or Wix.

Without going into the technical details, in this second part we'll focus on the specific use cases for each of the elements and answer the question:

→ When should I use a link or button?

1.1 Links ("a")

Main use: Links are mainly used for navigation. They are intended to direct the user to another page or another section of the current page.

Best practices (SEO & Accessibility): Link text should be descriptive and clearly indicate the destination or function of the link.

1.2 Buttons

Main use: Buttons are used to trigger an action (on the same page), such as submitting a form, opening a modal, or triggering a JavaScript function.

Best practices (Accessibility): The text on the button must clearly indicate the action it will trigger.

⚠️ Two specific button features

No href attribute required: Buttons don't need an href attribute.
Utiliser "<button type="submit">Action</button>" pour les actions comme la soumission de formulaires.

1.3 [In brief] The main distinction of use :

The main distinction between the use of"a " and"button" elements is behavioral:

→ Links move to another resource, while buttons trigger an action on the same page.

2. How to use them on Webflow?

If you're writing your code "from scratch", then you now know that you need to be vigilant when drafting your HTML. But if you're using no-code or low-code tools, how can you make the most of "a " and "button" semantics?

Let's take a closer look at Webflow!

2.1 The "problem" of Link and Button elements in Webflow

On Webflow, when you use the "default" elements proposed by the tool - the Link or Button - there's a small problem.

Both elements actually have the same HTML markup = "a " (Cf. screen reader image). And as we saw earlier, this doesn't meet the accessibility challenges and best practices recommended by browsers in 2023.

Fortunately, there are two ways to correct this error.

2.2 [Option 1] Using attributes :

Using an aria attribute gives browsers an additional indication when reading your HTML code. You can therefore "change" the role of an element by adding new information.

Adding aria values to descriptions to define the roles (type) of Link & Buttons elements is a solution that works, so that search engines make the distinction. This is what Webflow does, for example, with its "Button Submit" for its forms.

In short, an option that works... but not optimally. Because it's now possible to do this without adding a manual tag, or using an aria attribute, by natively creating a real HTML button.

Find out more about Aria Labels → Aria Labels

2.3 [Option 2: Recommended] How to create a "real" button on Webflow?

[This option is our recommendation if you want to use a button to trigger an action on your page, such as opening a pop-up].

To create a best-practice HTML " button" on Webflow, you'll need to use an alternative to Link & Buttons: the DOM "Custom element".

With Webflow's Custom Element, you can develop your own HTML semantics in just a few steps.

→ Create a "button " on Webflow :

Add a Custom Element to your project.
Access your Settings.
Modify the element's Tag: Div → Button.

Here we go! 🥳

And to find out more:

Add a CSS class to the element to give it the style (design) of your choice.
Add a trigger to your element to trigger a JavaScript animation with this button.
Or define its type by following the W3 recommendations

Conclusion

Links are used to move users to a new "location" (navigation action), while buttons are used to trigger an action (on the same page). Using the right HTML element will improve the overall accessibility of your website.

If you're using Webflow, the default button element doesn't actually have the correct HTML semantics, but you can customize the "role" of this link using the Aria - or - attributes, you can create a button with the right HTML semantics using the custom element (DOM element), and then customize its style using CSS classes.