Skip to content
Chain links

The semantics of interaction vs navigation

Monday, December 7, 2020

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

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:

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

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.

Comments

In almost all cases, the comments section is a 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 Twitter (which is, in it's own way, a vile cesspool of Reply Guys, racists, and bots).

Thomas Banks

Thomas Banks

When I'm not building things for the internet, I take photos of stuff.
Loading Invisible Visible Navigation Close Arrow Info Online Online