HTMLのと、ボタンはどっちでマークアップするべきか コーディング

HTMLの<a>と<button>どっちを使うべき?ボタンの正しいマークアップ

HTMLの<a>タグと<button>タグ。
どちらもボタンとして使えるタグですが、「どっちを使えばいいの?」と疑問に思う人も多いはず。

それぞれのタグの使い方と、どちらのタグを使うべきかをまとめました。
よく似た<input type=”button”>についても触れているので、ご覧ください。

スポンサーリンク

<a>タグについて

<a>タグは、主にリンクを設定したい場合に使用するタグです。

HTML5からは、<a>タグの中に<p>タグや<div>タグなどのブロック要素を含めても良いとされ、さらに汎用性が増しました。

ボタンを作る際に、現状最も使われているのが<a>タグです。

<a>タグでのボタンの作り方

HTMLはこのように記述します。
<a>タグでボタンを作成すると、デフォルトではこのような表示になります。

CSSを追加してボタンっぽく。
デフォルトの装飾がほとんどないので、追加するCSSが少なく済むのが利点ですね。

グラデーションを使ったボタンの作り方は下記の記事でご紹介しています。

スポンサーリンク

<button>タグについて

<button>タグはそのままの意味で、ボタンを作成するためのタグです。
<button>タグでマークアップすると、シンプルなデフォルトデザインでボタンが表示されます。

リンクを飛ばすボタンの他にも、フォームで使用する「送信」「リセット」にも使えます。

<button>タグでのボタンの作り方

HTMLはこのように記述します。
<button>タグでボタンを作成すると、デフォルトではこのような表示になります。
グラデーション背景と枠線の、簡易的な装飾が付いていますね。

CSSで装飾を加えます。
<a>タグでマークアップした時と比べると、デフォルトの装飾を打ち消すコード・カーソルをポインターに変更する記述が必要になります。
具体的な追記コードは「background」、「border」、「cursor」です。

「type=””」の値を変更することで、汎用ボタン以外にも使用できます。

type=”submit”フォームの送信ボタン(初期値)
type=”reset”フォームのリセットボタン
type=”button”汎用ボタン

<input type=”button”>との違い

結論を先に言ってしまうと、どちらも機能は同じです。
<button>タグも<input type=”button”>タグも「汎用ボタン」という同じ位置づけになります。

ただ、機能面以外で大きな違いがあります。
それは、<button>タグには閉じタグがあるということ。

閉じタグがあるということは、beforeやafterの疑似要素が使えます。
ボタンにアイコンなどを付けたい場合は多いと思うので、<button>タグの方が使用頻度は高くなります。

<input>タグに疑似要素は使えないので、デザインの幅は狭まります。

スポンサーリンク

結論

これが必ずしも正解というわけではありませんが、下記のルールでマークアップすると良いでしょう。

<a>タグ汎用ボタンに使用
<button>タグフォームの送信ボタン等に使用
<input type=”button”>使用しない

<a>タグを汎用ボタンにする理由

理由は2つあります。

1つ目の理由は、一般的に浸透しているということです。
<button>タグが推奨されているわけでもない以上、最も浸透している方法を選ぶのが無難です。

2つ目は、記述するコードが<a>タグの方がシンプルに済むことです。

<button>タグでマークアップした場合、<a>タグと比べ、下記の記述が必要になります。

  • HTMLに「type=””」の指定
  • CSSに、デフォルトのデザインを打ち消す指定
  • リンクの指定が「onclick=”location.href=’aa.html'”」と、長くなる
  • 小さな差だと思うかもしれませんが、1つのサイトに数多くのボタンを使うことになります。
    この少しの違いを、サイトのボリュームが大きくなるほど感じると思います。

    これらの理由から、<a>タグを使うのが良いとしました。

    <button>タグを送信ボタンにする理由

    まず、<a>タグをフォームの送信ボタンに使用することはできません。
    この時点で<button>タグか<input>タグの2択になります。

    上述した通り、<button>タグには疑似要素が使えます。
    <input type=”button”>と全く同じ機能を持ちつつ、さらに疑似要素も使えるとなると、完全に上位互換的な存在になります。

    これらの理由から、<button>タグを採用するのが良いでしょう。

    <input type=”button”>を使用しない理由

    上述した理由から、送信ボタンの立場は<button>タグに奪われました。
    そのため、ほとんど使うことはないでしょう。

    ただ、<button>タグはHTML5でしか使えないので、HTML4で構築する機会があれば、こちらを採用することになります。

    スポンサーリンク

    まとめ

    こういってしまったら元も子もないですが、基本はどちらを使っても間違いではありません。
    私のこれまでの経験から辿り着いた結論なので、数ある答えの内の一つと捉えてください。

    CSS WANDを使えばCSSの知識がなくても簡単にボタンに動きをつけることができます。
    併せてご覧ください。