Using links and buttons correctly

Using links and buttons correctly

You want to make something clickable on your website. Should you use a button or a link?  Does it matter?  I think it does.

There are 2 major use cases for click interactivity on a website.  It's either navigation or user interaction.  You click an element to go somewhere or you click to make something happen (delete an email, refresh a value, collude with a foreign power).

I would argue that navigation is the sole domain of the <a> tag and that other user interactions should use semantically meaningful controls to get the job done.

The design mocks say otherwise.

They can say whatever they want it doesn't matter.  As the developer you have to distinguish between how something looks and what it is.  With just a little bit of CSS it's easy to make a link look like a button and vice-versa.  This approach makes designers happy without sacrificing semantics.

F*#k semantics you say?

No seriously, Semantics matter for a variety of reasons. Lemme show you.

  1. Semantics are much less work for you.  Making a link behave like a button is more work than using a button. Using a checkbox is easier than writing a jQuery plugin (dear lord don't do that) that behaves like a checkbox.
  2. Better Usability.  Semantically correct components work properly with keyboards. They work better with screen readers. They will use native mobile implementations automagically. All because you didn't try to re-invent the wheel.
  3. They degrade better.  You use javascript to trigger some validation on a form submit button but in the absence of javascript the button itself will continue to work.  That statement isn't true if you used an <a> tag.  Using the proper element means that you can expect a basic level of functionality that will be preserved in the absence of javascript.  This is called graceful degradation and it rocks.
  4. You will be held in the same regard as people who contribute to open source or donate to wikipedia.
When people who donate $3 to Wikipedia meet people who use semantic HTML. Image of Porky pig and Daffy duck greeting each other dressed in french aristocratic regalia.


<button id="home-link">Home</button>

	$('#home-link").on('click', function(){

This is horrible!  Yes, the design looked like a giant button so you used a button.  It gives no indication to the user what URL they are about to go to!  Google won't be able to crawl it easily and will likely complain.  Also, what happens if Javascript is slow to load or disabled? It will be unusable.

## SCSS ##
.link-2-btn {
  border: 2px solid black;
  padding: 0.5rem 0.75rem;
  display: inline-block;
  border-radius: 3px;
  background-color: red;
  text-decoration: none;
  color: white;
  font-family: monospace;
  transition: linear all 100ms;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
  cursor: arrow;
  &:hover {
    box-shadow: 0 0 0 #000;
    background-color: darkred;

## HTML ##
<a href="/home" class="btn-2-link">Home</a>

Look at that beautiful piece of code.  The browser will recognize it as a link and tell screen readers about it.  It will display a URL in the browser on hover. It will even work without javascript! And magically it will look like a button just like the design wanted.  #WINNING!