【HTML】li要素の中にpタグ(段落)を入れてもよい?正しい使い方を解説

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を自動生成する仕様(正常な動作)