Skip to content

Instantly share code, notes, and snippets.

@maxis1718

maxis1718/a-vs-button.md

Last active January 16, 2018 10:02
Show Gist options
  • Save maxis1718/19a44f0f77c2143a041f5561f5bd80c2 to your computer and use it in GitHub Desktop.
Save maxis1718/19a44f0f77c2143a041f5561f5bd80c2 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. maxis1718 revised this gist Jan 16, 2018. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions a-vs-button.md
    View file
    Original file line number Diff line number Diff line change
    @@ -23,5 +23,5 @@ HTML 的 semantics -- 不同的 tag 都有自己存在的價值, 代表著不同

    - Accessibility

      對一般使用者來說, 兩者行為一樣, 長相也一樣，瀏覽網頁當然沒有影響。
     那盲人呢？他們會用聽的知道「喔這是一個 link 會帶我去哪個文章」「喔這是一個 submit button 我可以註冊」所以誤用也會讓他們無法使用網頁
    對一般使用者來說, 兩者行為一樣, 長相也一樣，瀏覽網頁當然沒有影響。
    那盲人呢？他們會用聽的知道「喔這是一個 link 會帶我去哪個文章」「喔這是一個 submit button 我可以註冊」所以誤用也會讓他們無法使用網頁
  2. maxis1718 revised this gist Jan 16, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion a-vs-button.md
    View file
    Original file line number Diff line number Diff line change
    @@ -23,5 +23,5 @@ HTML 的 semantics -- 不同的 tag 都有自己存在的價值, 代表著不同

    - Accessibility

     對一般使用者來說, 兩者行為一樣, 長相也一樣，瀏覽網頁當然沒有影響。
      對一般使用者來說, 兩者行為一樣, 長相也一樣，瀏覽網頁當然沒有影響。
     那盲人呢？他們會用聽的知道「喔這是一個 link 會帶我去哪個文章」「喔這是一個 submit button 我可以註冊」所以誤用也會讓他們無法使用網頁
  3. maxis1718 revised this gist Jan 16, 2018. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions a-vs-button.md
    View file
    Original file line number Diff line number Diff line change
    @@ -23,5 +23,5 @@ HTML 的 semantics -- 不同的 tag 都有自己存在的價值, 代表著不同

    - Accessibility

    從我們的角度看當然沒有影響, 因為兩者行為一樣, 長相也一樣！
    那盲人呢？他們會用聽的知道「喔這是一個 link 會帶我去哪個文章」「喔這是一個 submit button 我可以註冊」所以誤用也會讓他們無法使用網頁
     對一般使用者來說, 兩者行為一樣, 長相也一樣，瀏覽網頁當然沒有影響。
     那盲人呢？他們會用聽的知道「喔這是一個 link 會帶我去哪個文章」「喔這是一個 submit button 我可以註冊」所以誤用也會讓他們無法使用網頁
  4. maxis1718 revised this gist Jan 16, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion a-vs-button.md
    View file
    Original file line number Diff line number Diff line change
    @@ -19,7 +19,7 @@ HTML 的 semantics -- 不同的 tag 都有自己存在的價值, 代表著不同

    - SEO

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

    - Accessibility

  5. maxis1718 revised this gist Jan 16, 2018. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions a-vs-button.md
    View file
    Original file line number Diff line number Diff line change
    @@ -17,9 +17,9 @@ HTML 的 semantics -- 不同的 tag 都有自己存在的價值, 代表著不同

    ### 誤用會有什麼影響?

    - Search engine
    - SEO

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

    - Accessibility

  6. maxis1718 revised this gist Jan 16, 2018. 1 changed file with 1 addition and 4 deletions.
    5 changes: 1 addition & 4 deletions a-vs-button.md
    View file
    Original file line number Diff line number Diff line change
    @@ -24,7 +24,4 @@ HTML 的 semantics -- 不同的 tag 都有自己存在的價值, 代表著不同
    - Accessibility

    從我們的角度看當然沒有影響, 因為兩者行為一樣, 長相也一樣！

     那盲人呢？他們會用聽的知道「喔這是一個 link 會帶我去哪個文章」「喔這是一個 submit button 我可以註冊」

    所以誤用也會讓他們無法使用網頁
    那盲人呢？他們會用聽的知道「喔這是一個 link 會帶我去哪個文章」「喔這是一個 submit button 我可以註冊」所以誤用也會讓他們無法使用網頁
  7. maxis1718 revised this gist Jan 16, 2018. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions a-vs-button.md
    View file
    Original file line number Diff line number Diff line change
    @@ -24,7 +24,7 @@ HTML 的 semantics -- 不同的 tag 都有自己存在的價值, 代表著不同
    - Accessibility

    從我們的角度看當然沒有影響, 因為兩者行為一樣, 長相也一樣！

     那盲人呢？他們會用聽的知道「喔這是一個 link 會帶我去哪個文章」「喔這是一個 submit button 我可以註冊」

    所以誤用也會讓他們無法使用網頁
  8. maxis1718 revised this gist Jan 16, 2018. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion a-vs-button.md
    View file
    Original file line number Diff line number Diff line change
    @@ -24,5 +24,7 @@ HTML 的 semantics -- 不同的 tag 都有自己存在的價值, 代表著不同
    - Accessibility

    從我們的角度看當然沒有影響, 因為兩者行為一樣, 長相也一樣！
    那盲人呢？他們會用聽的知道「喔這是一個 link 會帶我去哪個文章」「喔這是一個註冊我要按下 submit」

     那盲人呢？他們會用聽的知道「喔這是一個 link 會帶我去哪個文章」「喔這是一個 submit button 我可以註冊」

    所以誤用也會讓他們無法使用網頁
  9. maxis1718 revised this gist Jan 16, 2018. 1 changed file with 4 additions and 6 deletions.
    10 changes: 4 additions & 6 deletions a-vs-button.md
    View file
    Original file line number Diff line number Diff line change
    @@ -19,12 +19,10 @@ HTML 的 semantics -- 不同的 tag 都有自己存在的價值, 代表著不同

    - Search engine

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

    - Accessibility

    從我們的角度看當然沒有影響, 因為兩者行為一樣, 長相也一樣！

    那盲人呢？他們會用聽的知道「喔這是一個 link 會帶我去哪個文章」「喔這是一個註冊我要按下 submit」

    所以誤用也會讓他們無法使用網頁
    從我們的角度看當然沒有影響, 因為兩者行為一樣, 長相也一樣！
    那盲人呢？他們會用聽的知道「喔這是一個 link 會帶我去哪個文章」「喔這是一個註冊我要按下 submit」
    所以誤用也會讓他們無法使用網頁
  10. maxis1718 created this gist Jan 16, 2018.
    30 changes: 30 additions & 0 deletions a-vs-button.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    ## `<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 諸如此類的互動

    ### 誤用會有什麼影響?

    - Search engine

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

    - Accessibility

    從我們的角度看當然沒有影響, 因為兩者行為一樣, 長相也一樣！

    那盲人呢？他們會用聽的知道「喔這是一個 link 會帶我去哪個文章」「喔這是一個註冊我要按下 submit」

    所以誤用也會讓他們無法使用網頁