HTMLでリンクを書くときに、a タグと p タグの関係で迷うことがあります。
たとえば、次のような疑問です。
aタグはpタグで囲んでよいのかpタグの中にaタグを書いてよいのか- 文章全体をリンクにしたい場合はどう書くのか
- カード全体をクリックできるリンクにしたい場合はどうするのか
結論からいうと、文章の中にリンクを入れる場合は、p タグの中に a タグを書くのが基本です。
<p>
詳しくは<a href="https://example.com/">公式サイト</a>を確認してください。
</p>この記事では、a タグと p タグの使い分け、段落全体をリンクにする書き方、カード型リンクの作り方、避けたいNG例を整理します。
aタグとpタグの役割
まず、a タグと p タグは役割が違います。
| タグ | 意味 | 使う場面 |
|---|---|---|
p |
段落 | 文章のまとまりを書くとき |
a |
リンク | 別ページ、別サイト、ページ内の場所へ移動させたいとき |
p は文章のまとまり、a はリンクです。
そのため、普通の文章の一部にリンクを入れたい場合は、段落の中にリンクを書きます。
基本はpタグの中にaタグを書く
文章の途中にリンクを入れる場合は、次の書き方が基本です。
<p>
HTMLタグの使い分けは、<a href="/structural-html-tags/">HTMLタグの使い分けの記事</a>で解説しています。
</p>この書き方なら、段落の一部だけがリンクになります。
ブログ記事や説明文では、この形が一番よく使われます。
リンクテキストは内容がわかる言葉にする
リンクテキストは、「こちら」だけにするより、リンク先の内容がわかる言葉にする方が親切です。
たとえば、次のような書き方です。
<p>
詳しくは<a href="/structural-html-tags/">HTMLタグの使い分けの記事</a>を参考にしてください。
</p>リンク先の内容が文章だけでわかるため、ユーザーにも検索エンジンにも伝わりやすくなります。
文章全体をリンクにしたい場合
段落内の文章全体をリンクにしたい場合は、p の中に a を入れて、リンク部分を文章全体にします。
<p>
<a href="/css-display/">インライン要素とブロック要素の違いを読む</a>
</p>この書き方なら、段落としての意味は p が持ち、リンクとしての役割は a が持ちます。
ボタン風に見せたい場合は、CSSで a を装飾します。
.button-link {
display: inline-block;
padding: 10px 16px;
border: 1px solid #028ca1;
color: #028ca1;
text-decoration: none;
}<p>
<a class="button-link" href="/css-display/">関連記事を読む</a>
</p>a タグは初期状態ではインラインのように表示されますが、display: inline-block; を指定するとボタンのように余白をつけやすくなります。
aタグでpタグを囲む書き方はどう考えるか
HTMLでは、リンクとして広い範囲をクリックできるようにしたい場合があります。
たとえば、カード全体をリンクにしたい場合です。
この場合、a タグの中に見出しや文章を入れて、リンク全体をブロックのように表示する書き方があります。
<a class="article-card" href="/structural-html-tags/">
<span class="article-card__title">HTMLタグの使い分け</span>
<span class="article-card__text">div、p、spanの違いを解説します。</span>
</a>.article-card {
display: block;
padding: 16px;
border: 1px solid #ddd;
text-decoration: none;
}
.article-card__title {
display: block;
font-weight: bold;
}
.article-card__text {
display: block;
margin-top: 8px;
}カード全体をクリックできるようにしたい場合は、a に display: block; を指定すると扱いやすいです。
ただし、リンクの中にさらに別のリンクやボタンを入れるのは避けます。
pタグをaタグで囲むより、目的に合わせて構造を決める
単純な文章リンクなら、p の中に a を書く形で十分です。
カード全体をクリックさせたいなら、a をカードの外側にして、CSSでブロック表示にします。
「a が外側か、p が外側か」だけで覚えるより、次のように目的で分けるとわかりやすいです。
| 目的 | おすすめの書き方 |
|---|---|
| 文章の一部だけリンクにしたい | <p>...<a>リンク</a>...</p> |
| 文章全体をリンクにしたい | <p><a>文章全体</a></p> |
| カード全体をリンクにしたい | <a class="card">...</a> に display: block; |
避けたいNG例
リンクの書き方で、避けたい例も確認しておきます。
aタグの中にaタグを入れる
リンクの中にさらにリンクを入れる書き方は避けます。
<a href="/article/">
記事カード
<a href="/category/">カテゴリ</a>
</a>カード全体をリンクにしたい場合でも、内部に別のリンクを入れないように設計します。
カテゴリリンクなどを別でクリックさせたい場合は、カード全体リンクをやめるか、リンク範囲を分けます。
リンクテキストが「こちら」だけ
リンクテキストが「こちら」だけだと、リンク先の内容が伝わりにくいです。
<p>詳しくは<a href="/css-display/">こちら</a>。</p>できれば、リンク先の内容がわかる言葉にします。
<p>
詳しくは<a href="/css-display/">インライン要素とブロック要素の違い</a>を参考にしてください。
</p>リンクをボタンの代わりに使いすぎる
a タグはページ移動やURLへのリンクに使います。
フォーム送信、モーダルを開く、画面内の状態を切り替える、という操作だけが目的なら、button を使う方が自然な場合があります。
<button type="button">メニューを開く</button>「別の場所へ移動するなら a」「その場で操作するなら button」と考えるとわかりやすいです。
aタグをブロック表示にするCSS
a タグは初期状態ではインラインのように表示されます。
そのため、幅や高さ、余白を扱いやすくしたい場合は、CSSで表示を変えます。
.link-box {
display: block;
padding: 16px;
border: 1px solid #ddd;
}横幅を内容に合わせつつ、ボタンのようにしたい場合は inline-block も使えます。
.button-link {
display: inline-block;
padding: 10px 16px;
}a タグそのものを変えるのではなく、CSSの display で見た目を調整します。
ページ内リンクを書く方法
a タグは、別ページへのリンクだけでなく、ページ内の特定の場所へのリンクにも使えます。
移動先の要素に id をつけます。
<p><a href="#summary">まとめへ移動する</a></p>
<h2 id="summary">まとめ</h2>href="#summary" と書くと、同じページ内の id="summary" がついた場所へ移動します。
別タブで開くリンクを書く方法
外部サイトを別タブで開きたい場合は、target="_blank" を使います。
<a href="https://example.com/" target="_blank" rel="noopener noreferrer">
外部サイトを開く
</a>target="_blank" を使う場合は、rel="noopener noreferrer" も合わせて指定しておくとよいです。
まとめ
a タグと p タグは、役割を分けて考えると迷いにくいです。
この記事のポイントをまとめると、次のようになります。
pは段落、aはリンクを表す- 文章の一部をリンクにするなら
pの中にaを書く - 文章全体をリンクにするなら
<p><a>...</a></p>がわかりやすい - カード全体をリンクにするなら
aを外側にしてdisplay: block;を指定する aタグの中に別のaタグを入れない- リンクテキストはリンク先の内容がわかる言葉にする
- ページ移動なら
a、その場の操作ならbuttonを検討する
タグの意味自体を整理したい場合は、HTMLタグの使い分け も参考にしてみてください。
関連記事
- HTMLタグの使い分け｜div・p・span・h1〜h3・asideを初心者向けに解説
- インライン要素とブロック要素の違い｜div・span・pの改行をCSSで制御する方法
- htmlの箇条書きリスト、順序付きリスト、説明リストの使い方
- HTMLタグの仕組みと属性について