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

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

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

この記事の目次

<a>タグについて

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

理由は2つあります。

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

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

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

HTMLに「type=””」の指定

CSSに、デフォルトのデザインを打ち消す指定

リンクの指定が「onclick=”location.href=’aa.html'”」と、長くなる

小さな差だと思うかもしれませんが、1つのサイトに数多くのボタンを使うことになります。
この少しの違いを、サイトのボリュームが大きくなるほど感じると思います。

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

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

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

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

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

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

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

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