Should I use a button or a link if the URL doesn&#

Question

I'm building an app which works only with JavaScript enabled (otherwise, an appropriate message is displayed). There are a couple of screens in the app: game, tutorial, settings, about/credits. They look like separate pages, but it's all a single-page app. There are no URL changes when navigating between the screens.

Should I use a button or an anchor in this case? It feels like an anchor, but there's no page to lead to, meaning that href would have to be #. Also an anchor will break common patterns such as opening in new tab/window (no URL change means the app will restart from scratch in a new tab).

Answer 1

UI-Elements who operate in the same environment should not serve fallbacks to another URL. From the semantic point of view <buttons> are the way to go, but sometimes the implementation of those when optical modifications require more effort as an simple <a>-tag would, an <a>-tag would be the better way, regardless of the semantic. A screen reader for example has only minimal differences between a button and an anchor and complex UIs who mimic the semantic behavior of buttons with other tags have issues with more weight when considering alternative tags.