HTMLのリスト項目(<li>)の中に段落タグ(<p>)を入れても良いのかどうか、疑問に思ったことはありませんか?
結論から言うと、<li>の中に<p>を入れることはHTML仕様上問題ありません。ただし、適切な使い方のルールがあります。
この記事で学べること:li内でpが使える条件・正しい書き方・SEO・アクセシビリティへの影響・具体的なユースケース
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>
使い分けのポイント:箇条書きの短い項目ならpは不要。各リスト項目に複数の段落・詳細説明が必要な場合にpを使うのが適切です。
具体的なユースケース:手順書・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>をそれぞれ別のセマンティクスとして読み上げます。意味のある使い方であれば問題ありません。
Markdown→HTML変換の場合:Markdownで空行を含むリスト項目を書くと、多くのMarkdownパーサーが自動的に
<p>を挿入します。これはMarkdown仕様上の正常な動作です。よくある質問(FAQ)
Q. li内にpを入れるとHTMLバリデーターでエラーになりますか?
A. なりません。HTML Living StandardおよびHTML5の仕様でli内にpを含むフローコンテンツは許可されています。W3CのバリデーターもこのHTMLを有効と判定します。
Q. li内にh2・h3などの見出しを入れることはできますか?
A. 仕様上は可能ですが、セマンティクス的に推奨されません。見出しはページ構造の階層を表すものであり、リスト項目の中に入れると文書構造が不明瞭になります。代わりにstrongやdl/dt/ddの使用を検討してください。
Q. Markdownがliにpを自動挿入するのですが、どうすれば防げますか?
A. Markdownでリスト項目間に空行を入れるとルーズリストとして扱われ、pタグが挿入されます。空行を入れずに書く(タイトリスト)とpは挿入されません。パーサーの設定でこの挙動を制御できる場合もあります。
まとめ
<li>内に<p>を入れることはHTML仕様上問題ない- 短い箇条書き項目にpは不要。複数の段落が必要な場合に使う
- pを入れるとデフォルトマージンが付くため、CSSで調整する必要がある場合がある
- Markdownの空行リストはpを自動生成する仕様(正常な動作)