DEV Community

Cover image for The semantics of interaction vs navigation

The semantics of interaction vs navigation

thomasxbanks profile image Thomas Banks ・1 min 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:

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

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.

Discussion (0)

Forem Open with the Forem app