C Tidd

Links aren’t buttons

Links are for navigation; buttons are for interaction. Looking at the usability and semantics of two core HTML elements.

The <a> element

With an href: <a href="https://ctidd.com/2017/links-arent-buttons">

  • A standard link, allowing the user to navigate as they choose.

Without an href: <a>

  • A placeholder link, indicating the current page in a navigation menu without allowing the user to click on it.

With a click handler: <a onClick={this.doSomething}> or <a href="#" onClick={this.doSomething}>

  • If there isn’t an href, the user can’t focus on the link when tabbing through a page with their keyboard. This is detrimental for users who prefer not to use a mouse or are accessing your site through assistive technologies, such as screenreaders.
  • If there’s a nominal href such as #, a user can focus on the link and click with their keyboard, but they can also open it in a new tab (not realizing the tab won’t be the intended page).

What to use instead of a click handler:

  • To perform an in-page interaction with JavaScript, consider <button type="button"> instead.
  • To navigate to a new page, the href should be set with the correct URL.

The <button> element

Type button: <button type="button">

  • No intrinsic behavior.
  • This type of button is suitable for any interaction that does not take the user to a new page: opening or closing a modal or menu, toggling an accordion section, etc.

Type submit: <button type="submit">

  • A button that submits its form owner.
  • This is the default behavior of a button inside a form without a type attribute.
  • This type of button is appropriate both for forms that mutate data and for search forms that set a querystring in a GET request to a search results page.

Type reset: <button type="reset">

  • Resets the button’s form owner.

Semantics and appearance

Remember, the appearance of an element and its semantics are separate issues. There’s nothing wrong with styling buttons to look more like links in specific scenarios. The issue with using the wrong element has more to do with its behavior and usability, as explained above.

Summary

Here are a few scenarios and the corresponding element:

  • Submit a form: <button type="submit">
  • Go to a page: <a href="https://ctidd.com/2017/links-arent-buttons">
  • Open a menu: <button type="button">

Further reading

  • Links aren’t buttonsMIT License
    • 2017
    • HTML + CSS
    • Best practices
Like the article? Get in touch: