HTML buttons & anchors key differences

Three years ago I wrote this article in medium When does an anchor becomes a button? . Short answer: never!.

Sadly, I still see some websites using anchor and button elements without the proper understanding of the differences between them.

With some CSS & JS a developer should be capable of styling an element to look like a button. An <input>, <div>, <span> even a <li> could look like a call to action.

Is this is a good practice? Short answer: no!

HTML provides elements that support interaction with multiple devices (mouse, keyboard, screen readers, switches, fingers) without the need to add extra code.

My advise is "use semantic HTML". Visit MDN Web Docs - HTML elements reference and WAI-ARIA Authoring Practices to learn the differences between each one of the elements.

Front End Development engineers are responsible for understanding the vast majority of them — even though we only use 30% or less regularly — and we should educate other team members on the proper usage of say elements.

When receiving a wireframe, design or a story we should ask the team what's the intent of the element before coding the first line.

• Is it going to open a new page?
  Then use an <a> anchor element.
• Is it going to remain in the same page?
  Then use <button>.

Playground

Can you guess which one of these four is a real button ?

In this example I have used <a>, <div> and <button> HTML elements.

  
    <a class="demo-button">BUTTON 1</a>
    <a href="#" class="demo-button" >BUTTON 2</a>
    <div class="demo-button">BUTTON 3</div>
    <button class="demo-button">BUTTON 4</button>
  

Applying some CSS styling, any element can look like a button.

  
    .demo-button {
      background: var(--dark-color);
      color: var(--light-color);
      text-decoration: none;
      border: 0;
      border-radius: 4px;
      padding: 0.5rem 2rem;
      line-height: 1.5;
      display: inline-block;
    }
  

However they have important differences:

• Intent
• Focusability
• Keyboard Interaction
• Mouse Interaction

Intent

In the broadest generalization the <button> element should be used for in-page interactions: open a video, open a modal, submit a form.

In the other hand the <a> (anchor) element represents a link to other web pages, files or locations in the page, email or anything else a URL can address.

Focusability

For a site to be accessible, it must be easy for keyboard-only users to perceive where focus is at all times. There must always be a visible element with focus, and that focus must be obvious.

An HTML Element can receive focus using the keyboard TAB or SHIFT + TAB key.

An element won't actually take focus unless it's one of:

• <a> / <area> with an href
• <input> / <select> / <textarea> / <button> but not with disabled attribute.
• <iframe> (though focusing it doesn't do anything useful).
• <pre> just discovered this while writing this article.
• Any element with a tabindex.
• Other embedding elements also, maybe, I haven't tested them all.

Homework: Use your keyboard and try to focus on the buttons provided in the playground above.

Keyboard Interaction

In most browsers <a> is triggered using ENTER. If you use space when an anchor is selected, the browser will scroll down.

Meanwhile <button> is triggered using both ENTER and SPACE. This is an important / critical difference between both element interactions as they don't behave the same way (as some might believe) an extra Javascript is required to close this gap.

Visual differences

Unless CSS is used to specify the cursor type, there will be a small difference on the cursor styling when you hover over the text. <a> is selectable, and the cursor will transform into "text selector" when text is hovered.

Homework: Give it a try and see how the cursor changes from arrow or hand pointer, to text while hovering on the text of the elements. Use this link to navigate back to the playground.