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

先看 [Demo](https://codepen.io/maxiskao/pen/mpGpKe?editors=1100)

套上 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 我可以註冊」所以誤用也會讓他們無法使用網頁