メインコンテンツへスキップ
Satohas Blog

HTMLの「a要素」と「button要素」の違い

HTML

HTMLの「a要素」と「button要素」の違い：使い分け

ページネーションの実装時、「これはリンク（a）にすべきか、ボタン（button）にすべきか？」と疑問に思ったことので整理 今回は、その違いをまとめました。

1. <a>（アンカー要素）：ナビゲーションのためのもの

<a> 要素の役割は、ユーザーを別の場所に導くこと（ナビゲーション）。

  • 主な用途

    • 別のウェブページやサイトへの移動
    • ページ内アンカー（特定のセクションへのジャンプ）
    • メール送信（mailto:）や電話発信（tel:）

  • 必須属性

    • href: リンク先の指定に必須。これがないとアクセシビリティ上の問題が生じる。

  • アクセシビリティの注意点

    • 意味のあるテキスト: 「ここをクリック」ではなく「ご利用ガイドを見る」など、リンク先がわかる表現にする。
    • 新しいタブの明示: target="_blank" を使う場合は、ユーザーが驚かないよう「（別ウィンドウで開く）」といった注釈を添えるのが親切。
Caution

a要素の誤用：onclickイベント専用にするのはNG href="#" や href="javascript:void(0)" と記述して、JavaScriptの実行ボタンとして使うのは避けましょう。これはアクセシビリティを損なうだけでなく、意図しない挙動（ページトップに戻るなど）の原因になります。その場合は <button> を使いましょう。

2. <button>（ボタン要素）：アクションのためのもの

<button> 要素の役割は、その場で何らかの操作を実行すること（アクション）。

  • 主な用途

    • フォームの送信（Submit）
    • ダイアログ（モーダル）の開閉
    • メニューの展開、コンテンツの切り替え

  • type属性の使い分け

  • type="submit": フォームデータを送信する（デフォルト値）。

  • type="button": JavaScriptと組み合わせて、汎用的な操作に使用する。

  • type="reset": 入力内容をリセットする。

  • アクセシビリティの注意点

  • 名前（ラベル）の提供: アイコンのみのボタン（×ボタンなど）には、aria-label 等で「閉じる」といった名前を付与する。

  • 状態の伝達: 押し込まれた状態なら aria-pressed など、適切なARIA属性を検討する。

3. 比較まとめ：どちらを使うべき？

特徴<a> 要素<button> 要素
役割移動（Where）実行（What）
動作の例URLが変わる、ページ内を移動する送信する、開く、変更する
必須属性hreftype (推奨)
見た目テキスト装飾が一般的（CSSでボタン風にもできる）立体的なボタンが一般的（CSSでリンク風にもできる）

見た目と役割の分離

「見た目がボタンだから <button> を使う」のは間違い。

  • 見た目がボタンでも、役割が「ページ遷移」なら <a> を使う。
  • 見た目がリンク（青文字）でも、役割が「アクション」なら <button> を使う。

Next.jsを使用している場合、ページ間の遷移には next/link の <Link> コンポーネントを使用する。

import Link from 'next/link';
 
// Next.jsでの推奨される遷移方法
<Link href="/about">会社概要</Link>;

<Link> は内部的に <a> 要素を生成し、クライアントサイドナビゲーション（高速な遷移）やプリフェッチ（データの先読み）を最適化してくれる。

5. 結論：ページネーションはどうすべき？

調査の結果、今回の疑問への答えはこうなった。

「ページネーションは、基本的には <a> 要素（Next.jsなら <Link>）を使うのがベスト」

なぜなら、ページネーションは「URLを変更して、そのページの内容を表示する」というナビゲーション（移動）の性質が強いから。検索エンジン（SEO）もリンクを辿って各ページをクロールするため、<a> 要素を使うことが推奨される。

参考資料