html - Why are button's discouraged from navigation?

Question

This may be an opinionated question, but I was looking around the web and it seems like web developers like to style <a> tags to look like buttons, rather than use a specific <button> tag. I've noticeably seen this when looking at navigations

After a bit of research, I found this:

• Buttons are not search friendly, since the text within is invisible to search engines.
• Buttons are harder to update than links, requiring Photoshop and a new image for every update.
• Buttons load more slowly that links, making them especially bad for mobile visitors.
• Buttons are less accessible to the visually impaired.
• Buttons are unnecessary, even if you want to use non-standard fonts, thanks to tools like TypeKit. ~ quoted from here

However, most of these 'reasons' seems quite flimsy and answers like 'you need photoshop' seem... well... invalid?

So I was wondering:

Is there an actual reason why the <button> tags aren't used when creating navigation menus, and instead style <a> tags to look like buttons? Why aren't buttons the norm? Is this not what they're made for?

^{* I do not wish for your opinion here, nor viewpoint. Only factual information as to why this is the case}

Answer 1

After reading up on multiple documents posted in the comments, it seems that there is actually a clear factual reason buttons are not used in navigation bars.

Anchor tags

These are used when there is a page redirect or taking a user elsewhere on the website.

• If it navigates, it is a link. Use link markup with a valid hypertext reference

~Links are not buttons

Button elements

These are used when you want to doSomething() that is not redirecting the user. I.e. submitting a form / etc.

---

The question you need to ask yourself is:

Will this control be used to initiate an immediate action or Is the action to navigate to another page?

if the answer to your question is the first part, then you should be using a button element. Whereas if it is the latter that you are wishing to do, then you should be using an a element.

further Reading:

• w3.org

• Links are not buttons. Neither are DIVs and SPANs

• When To Use The Button Element