I am building a website and have previously built navigation using both buttons and anchors. I am confused which one to use for tabbed navigation.

I have looked at this question/answer which essentially came down to:

Use <a> when you are redirecting to another page as this is the intended use of a hyperlink.

Use <button> to carry out an action like a form submission, or to execute a function.

This makes a lot of sense to me, but my particular site is an app with tabbed navigation. I have a few pages that are being built by manipulating the DOM, but the site link remains the same, and the navigation is actually just replacing existing dom elements with new ones.

In this case, is it better to use buttons for navigation, or should I just always stick to anchors even if they aren't "redirecting" the page traditionally? I know that some of the differences are just subjective, such as the out of the box styling differences, but are there considerable drawbacks for using one over the other in tabbed navigation?

CodePudding user response：

Semantically speaking, this sounds like same-page navigation to me. As per standards, use the <a> element for this purpose. Then add an event listener for any JavaScript side effects.

• Read the standards of the <a> element here - on whatwg.org.
• Read about the <a> element on the MDN documentation - here.

Hope this helps.