HTMLの＜a＞タグと＜button＞タグの違いとは？どちらを使うべき？

ウェブ開発では、ユーザーがクリックする要素として<a>タグ（アンカータグ）と
<button>タグ（ボタンタグ）のどちらを使うべきか迷うことがあります。
見た目が似ているため混同しやすいですが、両者には明確な違いがあります。
本記事では、それぞれの特徴を詳しく解説し、適切な使い分けを紹介します。

<a>タグと<button>タグの基本的な違い

タグ	主な用途
<a>	リンク（ページ遷移・外部サイトへの移動）
<button>	ボタン（フォーム送信・JavaScript実行など）

<a>タグは「リンク」

• 別のページやファイルへ移動するために使用。
• href属性でリンク先を指定できる。
• target="_blank"を使えば新しいタブで開くことも可能。

<a href="https://example.com">リンク</a>

<button>タグは「ボタン」

• フォーム送信やJavaScriptのトリガーとして使用。
• type="button"やtype="submit"を指定できる。

<button onclick="alert('ボタンがクリックされました')">ボタン</button>

2. クリック時の動作の違い

タグ	デフォルトの動作
<a>	クリックするとリンク先に移動する
<button>	クリックしてもページ遷移しない（フォーム送信やJS処理に利用）

フォーム送信時の違い

<!-- aタグでフォーム送信は非推奨（GETメソッドのみ） -->
<a href="submit.php?name=test">送信（非推奨）</a>

<!-- buttonタグならフォーム送信可能 -->
<form action="submit.php" method="post">
    <button type="submit">送信</button>
</form>

• <a>タグはGETメソッドでしかデータを送信できない。
• <button>タグならPOSTメソッドでもデータを送信可能。

CSSスタイリングの違い

タグ	スタイリングのしやすさ
<a>	デフォルトで青色＆下線あり（CSSで調整可能）
<button>	ブラウザごとにデフォルトスタイルが異なる

CSSでボタン風にする例

<!-- aタグをボタンのように見せる -->
<a href="#" style="display: inline-block; padding: 10px 20px; background: blue; color: white; text-decoration: none; border-radius: 5px;">リンクボタン</a>

<!-- buttonタグのスタイルを調整 -->
<button style="background: blue; color: white; padding: 10px 20px; border-radius: 5px;">ボタン</button>

• <a>はCSSでボタン風にすることが多い。
• <button>はブラウザごとに異なるデフォルトスタイルがあるため、統一したデザインにするにはCSSで調整が必要。

アクセシビリティの違い

タグ	アクセシビリティの特徴
<a>	キーボード Tab でフォーカス可 (Enter で実行)
<button>	キーボード Tab でフォーカス可 (Enter や Space で実行)

• <a>はEnterキーでのみ動作。
• <button>はEnterキーとSpaceキーの両方で動作。

アクセシビリティを考慮した例

<!-- aタグはaria-labelで説明を補足 -->
<a href="https://example.com" aria-label="サンプルサイトへ移動">リンク</a>

<!-- buttonタグもアクセシビリティ対応可能 -->
<button aria-label="メニューを開く">☰</button>

---

<a>にonclickをつける vs <button>を使う

❌ <a>タグでボタンのような処理をする（非推奨）

<a href="#" onclick="alert('クリックされました')">クリック</a>

• <a>タグはページ遷移を前提としたタグなので、JavaScriptだけの処理には向いていない。
• href="#" を書くのはSEO的にも良くない。

<button>を使う（推奨）

<button onclick="alert('クリックされました')">クリック</button>

• <button>タグはクリックしてもページ遷移せず、JavaScript処理だけを実行できる。

---

結論（どちらを使うべき？）

状況	おすすめのタグ
ページ遷移する場合	<a>タグ
フォームの送信ボタン	<button type="submit">
JavaScriptを実行するボタン	<button>
デザインの自由度を高めたい	<button> or <a>（CSSで調整）

基本ルール

• 「ページ移動するなら <a>」
• 「フォーム送信やJS処理なら <button>」

適切なタグを使うことで、コードの可読性・アクセシビリティ・SEOの観点からも最適化できます。

Favorite