<a> 跟 <button> 有什麼不一樣

先看 Demo

套上 css 之後，幾乎看不出哪個是 <a> 哪個是 <button>

那為什麼還需要用不同的 tags？全部用 <div> 然後卯起來刻 css 不就好了？

Semantics

HTML 的 semantics -- 不同的 tag 都有自己存在的價值, 代表著不同 content 的意義跟用途

<a> 用來 navigation, 就像 tongtong, Ian 說的換頁, 或是跳到一頁中的某個地方

而 <button> 或是 <input type='button'> 大部分用在 submit form, open/close modal 諸如此類的互動

誤用會有什麼影響?

• SEO

  例如 Google 的 crawler 來爬網頁的時候, 會透過我們網頁上的連結 (anchor, <a>) 在整個網站中亂竄, 如果把某個換頁行為換成 <button>, Google 就會傻住不知所措 (在這先不管 sitemap 的存在 xD)

• Accessibility

  對一般使用者來說, 兩者行為一樣, 長相也一樣，瀏覽網頁當然沒有影響。 那盲人呢？他們會用聽的知道「喔這是一個 link 會帶我去哪個文章」「喔這是一個 submit button 我可以註冊」所以誤用也會讓他們無法使用網頁