HTMLのリスト項目(<li>)の中に段落タグ(<p>)を入れても良いのかどうか、疑問に思ったことはありませんか?
結論から言うと、<li>の中に<p>を入れることはHTML仕様上問題ありません。ただし、適切な使い方のルールがあります。
li内にpタグを入れるHTML仕様
HTML Living Standard(WHATWGの仕様)によると、<li>の内容モデルはフローコンテンツを許可しています。<p>はフローコンテンツに含まれるため、<li>の中に入れることができます。
<!-- 有効なHTML -->
<ul>
<li>
<p>これはリスト項目の最初の段落です。</p>
<p>これは同じリスト項目の2段落目です。</p>
</li>
<li>
<p>別のリスト項目です。</p>
</li>
</ul>
一般的な使い方(pなし)との違い
<li>内に<p>があるかどうかで、ブラウザのデフォルトマージン・表示が変わります。
<!-- pなし:コンパクト表示 -->
<ul>
<li>シンプルなリスト項目</li>
<li>もう一つの項目</li>
</ul>
<!-- pあり:段落マージンが付く -->
<ul>
<li>
<p>詳しい説明が必要なリスト項目</p>
<p>補足情報はここに書きます</p>
</li>
</ul>
具体的なユースケース:手順書・FAQ
<li>内に<p>を使う典型例は手順書やFAQ形式のコンテンツです。
<ol>
<li>
<p><strong>ファイルをダウンロードする</strong></p>
<p>公式サイトからインストーラーをダウンロードします。
Windowsの場合は.exeファイルを選択してください。</p>
</li>
<li>
<p><strong>インストールを実行する</strong></p>
<p>ダウンロードしたファイルをダブルクリックして、
画面の指示に従ってインストールします。</p>
</li>
</ol>
CSSでマージンを調整する
<li>内の<p>にはデフォルトマージンが付くため、デザインによっては調整が必要です。
/* li内のpのマージンをリセット */
li p {
margin-top: 0;
margin-bottom: 0.5em;
}
li p:last-child {
margin-bottom: 0;
}
SEOとアクセシビリティへの影響
HTMLバリデーターでエラーにはなりません。SEO的にも問題はありませんが、スクリーンリーダーは<li>と<p>をそれぞれ別のセマンティクスとして読み上げます。意味のある使い方であれば問題ありません。
<p>を挿入します。これはMarkdown仕様上の正常な動作です。よくある質問(FAQ)
まとめ
<li>内に<p>を入れることはHTML仕様上問題ない- 短い箇条書き項目にpは不要。複数の段落が必要な場合に使う
- pを入れるとデフォルトマージンが付くため、CSSで調整する必要がある場合がある
- Markdownの空行リストはpを自動生成する仕様(正常な動作)
