What Are the Code Differences between Links vs Buttons?

Question

Where can I find code (html, css, and javascript) examples of links vs buttons.

Answer

This is an excellent question!

  • Links - The simplest answer is that a link is used to take the user to an entirely new page. Links are contained within an HTML anchor tag with an href attribute containing the URL where the user will be directed.
    • Example: <a href="website-url-here">Click Here</a>
  • Buttons - A button is meant to submit information and will not necessarily redirect the user to an entirely new web page.
    • Example: When a user clicks the button to submit their contact information for a company newsletter.

Here are a list of links to some great resources where you can find code snippets for links and buttons:

1. Codepen.io - QA quick search of 'links vs buttons' yielded these results.

2. The W3C has excellent resources for all things HTML5

3. The W3C resources for the button tag

4. The Mozilla Developer Network Documentation is a fabulous resource for JavaScript related questions

5. A11y 101 article on Buttons Versus Links

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.