frontendmemo

このサイトは、「html、css、js、ruby,ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

a要素とbutton要素の使い分け

スポンサードリンク


スポンサードリンク


先日下記のツイートをしましたが、多くのいいねをいただいたので記事にしたいと思います。


button要素とa要素の使い分け
a要素はリンク、button要素は何らかのアクションが発動すると覚えれば使い分けはokなんですが、アクションを発動するけどa要素を使う場合もあります。例えば、モーダルウィンドウ、タブはhref属性に値を入れて、JSでその値を使ってコンテンツを表示させたりするためにa要素にする例があります。

a要素とbutton要素は割とわかりにくい

a要素とbutton要素似て非なるものなんですが似ています。
以下おさらいです。

button要素

developer.mozilla.org

HTML のbutton要素はクリックできるボタンを表し、フォームや、文書で単純なボタン機能が必要なあらゆる場所で使用することができます。既定では、 HTML のボタンは ユーザーエージェント が実行されているホストのプラットフォームのスタイルと似ていますが、 CSS を使用してボタンの外見を変更することができます。

つまり主にフォーム要素内のデータを送るために送信ボタンを使います。

わかりにくい点1:見た目に騙されそうになる

html、cssを少し経験した方なら問題ないと思うのですが、ボタンの見た目をしていてもa要素だったりするわけです。

例えばLPのフォームページにリンクするプルンプルンしてるボタンはa要素なわけでです。
そしてその後フォームを入力してから押すボタンはbutton要素です。

大事なのは見た目ではなく、セマンティクス(意味)だということを覚えましょう。

わかりにくい点2:JSの機能の発火に使う

そこそこ慣れてきた方でもわかりにくいのはここではないでしょうか?
JavaScriptでは、様々な機能がありそれを動かすためのボタンがあります。

それをa要素にすべきかbutton要素にすべきかは悩むところで、同じ機能であっても実装者によっては違っていたりするのでやっかいです。
ただ元々の仕様に基づいて要素を選定していけばいいのでそこに立ち返ることが必要になります。

以下のJSの機能において自分のa要素、button要素を判断します。

JSの機能でa要素をボタンにする場合

  • スムーススクロール
  • タブパネル
  • モーダルウィンドウ
  • メガドロップダウン

JSの機能でbutton要素をボタンにする場合

  • スマホメニュー
  • カルーセルのナビ
  • トグル
  • アコーディオンパネル
  • ツールチップ

だいたいこんな感じでしょうか。
忘れてる機能があれば追記していきます。

判断軸

Tweetもしましたが、JSにおけるボタンの判断軸はhref属性に値を入れて、JSでその値を使ってコンテンツを表示させたりするためにa要素にする場合はa要素にします。
その一例が

  • スムーススクロール
  • タブパネル
  • モーダルウィンドウ
  • メガドロップダウン

ですね。他にもあるかもしれませんが大まかにいえばこの4つかと思います。

例えばタブについては下記記事をご覧ください。
www.frontendmemo.xyz

それ以外のコンテンツへの値の取得を必要としてないボタンに関しては全てbutton要素にしておくべきだと思います。