Webサイト制作において欠かせないのが、ページ同士を繋ぐaタグ（アンカータグ）です。
今回は、コーディング時に迷いがちなaタグの基本属性から、HTML5以降のマークアップ規則、SEOやアクセシビリティを意識した使い方まで、備忘録としてまとめた。
1. aタグの基本構造と主要な属性
aタグは href 属性（Hypertext Reference）と組み合わせることで、リンクとして機能します。
HTML
<a href="https://yahoo.com">Yahoo!サイトへ移動</a>
よく使う属性一覧
href: リンク先のURLや、ページ内アンカー（#id）を指定します。target="_blank": リンク先を新しいタブ（またはウィンドウ）で開きます。rel="noopener"/rel="noreferrer":target="_blank"を使用する際、セキュリティとパフォーマンスの観点から必須となる属性です（※最近のモダンブラウザでは自動付与されることが多いですが、明記するのが安全です）。download: リンク先のファイルをダウンロードさせたい場合に指定します（値にファイル名を入れると、その名前で保存されます）。
2. HTML5以降のマークアップ規則（ブロック要素の内包）
HTML4.01（古い仕様）の時代は、aタグは「インライン要素」だったため、中に入れられるのはテキストや他のインライン要素（span や img など）に限られていました。
しかし、HTML5以降（現在の仕様）では、aタグの中にブロックレベル要素（div、h1〜h6、p、section など）を丸ごと入れることが可能になりました。
○ 正しいマークアップの例（バナー全体をリンクにする場合）
HTML
<a href="/article/123" class="card-link">
<div class="card">
<img src="peach-1.jpg" alt="記事のサムネイル">
<h2>記事のタイトル</h2>
<p>記事の要約テキストがここに入ります。</p>
</div>
</a>
✕ 禁止されているNGマークアップ
いくらブロック要素を入れられるようになったとはいえ、以下のケースは仕様上禁止（入れ子不可）されています。
- aタグの中に別のaタグを入れる（リンクの二重構造）
- aタグの中にボタン（
buttonタグ）を入れる
HTML
<a href="/page1">
ここをクリック
<a href="/page2">別のリンク</a> </a>
3. SEO・アクセシビリティを高めるマークアップのコツ
① 「こちら」や「詳しく見る」を避ける（アンカーテキストの最適化）
検索エンジンのクローラーや、視覚障害者が使用するスクリーンリーダーは、アンカーテキスト（リンクになっている文字列）を読んでリンク先の内容を理解します。
- 悪い例: 詳細については、
<a href="…">こちら</a>をご覧ください。 - 良い例: 詳しい仕様については、
<a href="…">ご利用ガイドのPDF</a>をご覧ください。
② 画像をリンクにする場合は alt 属性を忘れずに
バナー画像などをaタグで囲む場合、画像の alt 属性がアンカーテキストの代わりになります。
HTML
<a href="/contact">
<img src="btn-contact.png" alt="お問い合わせはこちら">
</a>
4. ページ内リンク（スムーススクロール）の基本
同じページ内の特定の場所に飛ばしたい場合は、移動先の要素に id を付与し、aタグの href に #id名 を指定します。
HTML
<a href="#section-01">セクション1へスクロール</a>
<section id="section-01">
<h2>セクション1のコンテンツ</h2>
</section>※CSSに html { scroll-behavior: smooth; } を記述するだけで、JavaScriptを使わずに滑らかなスクロール（スムーススクロール）を実装できます。
まとめ
- aタグは現在、
divやpなどのブロック要素を丸ごと囲んでOK。 - ただし、aタグの入れ子や、中に
buttonを入れるのはNG。 target="_blank"を使う時はrel="noopener"をセットで意識する。- リンクのテキストは、それ単体で遷移先がわかる具体的な言葉にする。
コメント