概要
テキストにリンクをつける際、<p>リンクか<span>リンクかどのような違いがあるか
実際例
「リストページに戻る」ボタンの実装にあたって、普通のように実装しました。
<Link href="リストページ">
<Typography>HogeHoge</Typography>
</Link>
問題
実装結果、以下のようにHyperlinkが余計に長く、操作に邪魔になったりすることがありました。
解決
テキストのみにリンクがつくことを想定していたため、以下のように修正。
<Link href="リストページ">
<Typography component="span">HogeHoge</Typography>
</Link>
pタグでなく、spanタグとして実装するとこのようにリンクがテキストの幅のみになりました。
原因
pタグとspanタグの仕組み的な違いによる
p vs span
- p: block-level element
<p>, <div>, <h1> - <h6>, <section>, <article>, <header>, <footer>, <form>, <ul> & <ol>, <nav>, <main>- ブロック単位で分かれます。
- 一般的にブロック単位であるため、普通の場合は上記のように一行目全体的になります。
- span: inline-level element
<span>, <a>, <img>, <em>, <b>, <i>, <code>, <small>, <br>- そのコンテンツ単位に限って分かれます。
- 上記例のようにテキストのみにリンクをつける場合は、display: inlineを考慮しないとなりません。
結論
- ブロック単位でデザイン・実装が必要なら
<p>,<div>のようなblock-level elementを - テキスト単位でデザイン・実装が必要なら
<span>のようなinline-level emenetを