今更a要素とbutton要素について

HTMLのa要素とbutton要素の違いの整理。
ページネーションでボタンにリンクをあてるのに疑問に思って調査。
参考サイトをNotebookLMにいれて整理しながら記事を作っています。

<a>: アンカー要素

a要素（アンカー要素）は、ハイパーリンクを作るために使う。別のウェブページ、ファイル、メールアドレス、同一ページ内の特定の場所へ、ユーザーをナビゲートさせることが主な目的。

• href属性：リンク先URLの指定に必須。
• 適切な使用例：
  • 別のウェブサイトや同一サイト内の別のページへのリンク。
  • ページ内アンカー（特定のセクションへのジャンプ）。
  • メールアドレスへのリンク（mailto:）。
  • 電話番号へのリンク（tel:）。

アクセシビリティ

• リンクテキストはリンク先を示すものにする。
• 「ここをクリック」のようなあいまいな表現は避ける。
• target="_blank" で新しいタブやウィンドウを開く際は、その旨を明記する。

a要素の誤用：onclickイベント

a要素をボタンとして使い、hrefを#やjavascript:void(0)に設定するのは避ける。これはアクセシビリティを損ね、予期せぬ動作を招く。代わりに、<button>要素を使おう。

<button>: ボタン要素

button要素は、アクションを実行するために使う。
フォームの送信やダイアログの表示、JavaScriptによる操作などが該当する。

• type属性：ボタンの動作を指定。
  • submit：フォームを送信。
  • reset：フォームをリセット。
  • button：JavaScriptで使用。
• 適切な使用例：
  • フォームの送信。
  • ダイアログの表示。
  • JavaScriptによるアクションの実行。

アクセシビリティ

• アイコンのみを使う場合は、アクセシブルな名前を提供する。
• 適切なARIA属性（aria-pressedなど）でボタンの状態を伝える。
• フォーカス時の視覚的な変化を明確にする。

ページ遷移をもたらすボタン

見た目の表現 リンク（<a>要素）であっても視覚的にはボタンのように表現されることもあれば、反対にボタン（<button>要素や<input type=submit>要素等）もリンクテキストであるかのように表現されることがある。ページ遷移をもたらすボタンについては、マウスカーソルを乗せた時に指のカーソルに変更しても良い。

Next.jsのLink

<Link> is a React component that extends the HTML <a> element to provide prefetching and client-side navigation between routes. It is the primary way to navigate between routes in Next.js.

Next.jsのページ遷移はこれでいい。

まとめ

a要素はページ遷移、button要素はアクション実行に使用。
Next.jsのページ遷移は<Link> でいい。
ページネーションはbutton使わずtextに<Link> でよさそう。

参考サイト
https://developer.mozilla.org/ja/docs/Web/HTML/Element/button
https://developer.mozilla.org/ja/docs/Web/HTML/Element/a
https://www.digital.go.jp/policies/servicedesign/designsystem
https://nextjs.org/docs/pages/api-reference/components/link