a要素（リンク）の使い方
HTMLのa要素は、別のページやページ内の場所などへ移動するためのリンクを表します。
先に結論
href属性があるa要素は、ユーザーがたどれるハイパーリンクになります。
href属性がないa要素は、リンクではありません。リンクになりそうな場所を表すだけです。
最小の例
<a href="https://example.com/">Exampleを見る</a>画面には「Exampleを見る」と表示されます。ユーザーがリンクをクリックするか、キーボードで有効化すると、hrefに指定したURLへ移動します。
href属性は何を指定する？
hrefには、移動先のURLを指定します。絶対URLだけでなく、同じサイト内の相対URLや、ページ内の場所を示すフラグメントも指定できます。
<a href="/yugien/ja/form.html">フォームの説明</a>
<a href="/atlas/ja/form.html#fact-evidence">仕様上の根拠へ</a>
<a href="mailto:[email protected]">メールを送る</a>リンクとボタンは使い分ける
別の場所へ移動するならa要素、ページ上で処理を実行するならbutton要素を使います。
| 目的 | 使う要素 |
|---|---|
| 別のページへ移動する | <a href="..."> |
| メニューを開く、ページ上で処理を実行する | <button type="button"> |
| フォームを送信する | <button type="submit"> |
リンクの見た目にしたいからといって、button要素をリンクの代わりに使う必要はありません。
よくある間違い
- 移動先がないのに、クリック処理だけのために
href="#"を使う - ページ移動なのに、JavaScriptだけで移動させる
- ボタンで実行する操作を、リンクで表現する
- リンクの目的が分からない「こちら」だけをリンク文字にする
もう少し詳しく
target、download、rel、hreflangなどを指定すると、リンクの処理や関係をさらに表現できます。ただし、属性を追加する前に、そのリンクが「移動」なのか「ダウンロード」なのかを明確にします。
Atlasで確認する
hrefの有無だけでなく、コンテンツモデル、属性ごとの条件、リンクをたどる処理、DOM APIまで確認したい場合は、Yugien Atlasのa要素を参照してください。ボタンのtype状態やフォーム処理はAtlasのbutton要素で確認できます。