Skip to content
Chain links

The semantics of interaction vs navigation

Monday, 7 December 2020

At 258 words, this article should take about 1 minute to read.

This article is more than a year old and the information in it may be out of date.

It is commonplace for designers to style both links and buttons to look like “buttons”. But just because something looks like a button, doesn’t mean it is a <button> .

The general rule is to use <button onClick="function()"> to control in-page interaction and <a href="/path/to/link-destination"> to control navigation to a different page.

Examples of where to use a button element include toggling an off-canvas menu or loading more posts. If you are navigating to a different page - use an anchor link.

Never, ever, ever do this:

  onClick="function(){ window.location.href = '/path/to/new/page.html' }"
  Click me

Assistive technologies will announce button and link elements differently and they can be activated in different ways depending on the element - use the wrong one and you run the risk of confusing the user.

The in-page “anchor” link is an exception to this. Always use an <a href="#anchor-link"> tag for that even though the user doesn’t leave the page. This is because it will modify the URL and helps the user find the content.

Again, the same effect can be achieved using JavaScript to manipulate the Browser History API but why would you write extra code to recreate something the browser gives you for free?!

Oh, and if you're missing the "smooth scrolling" that you can add with JavaScript, consider the fairly well-supported scroll-behavior: scroll; property.



In almost all cases, the comments section is a vile cesspool of Reply Guys, racists, and bots.

I don't want to have to deal with that kind of hell so I don't have a comments section.

If you want to continue the conversation, you can always hit me up on Mastodon (which is not a vile cesspool of Reply Guys, racists, and bots).

Thomas Rigby

Thomas Rigby

When I'm not building things for the internet, I take photos of stuff.

Pronouns: he/him/his

Real. Simple. Syndication.

Get my latest content in your favorite RSS reader. I use InoReader but you don't have to.

What even is an RSS feed?!


Last played

Burn the Bitch

Ulver || Svidd Neger

Loading Invisible Visible RSS Navigation Close Arrow Info Online Online