web-dev-qa-db-ja.com

「ul」要素を「p」要素の子にすることはできません

ul要素の子としてp要素を使用できないのはなぜですか？

私は次のコードでウェブページを作りました

<p> some text
<ul>
<li>...</li>
<li>...</li>
.
.
.
</ul>
</p>

ここで、ul要素はp要素の子です。ただし、すべての主要ブラウザ（Chrome、Firefox、およびInternet Explorer-すべての最新バージョン）では、次のように解釈されます。

<p> some text</p>
<ul>
<li>...</li>
<li>...</li>
.
.
.
</ul>
<p></p>

（Chromeで）ul要素を右クリックし、[要素の検査]オプションを選択して確認しました。 Chromeで見ましたが、他の2つのブラウザーも同じように動作しました（CSSセレクター 'p ul'がうまく機能しませんでした）。

なぜそうなのですか？ブラウザによるこのような変更が行われる一般的なケースはありますか？

htmlhtml-lists
29
RK Poddar

HTML仕様 を確認してください。これは、段落要素にリストを置くことが禁止されていることを明確に示しており、実行できることの例もいくつか示しています。

リスト要素（特に、ol要素とul要素）は、p要素の子にすることはできません。したがって、文に箇条書きが含まれている場合、どのようにマークアップする必要があるのか​​不思議に思うかもしれません。

たとえば、この素晴らしい文には、

  • ウィザード、
  • 軽い旅行より速い
  • テレパシー、

以下でさらに説明します。

解決策は、HTML用語の段落が論理的な概念ではなく、構造的なものであることを認識することです。上記の素晴らしい例では、この仕様で定義されているように、実際には5つの段落があります。リストの前に1つ、箇条書きごとに1つ、リストの後に1つです。

したがって、上記の例のマークアップは次のようになります。

  <p>For instance, this fantastic sentence has bullets relating to</p> 
   <ul>
       <li>wizards,  
       <li>faster-than-light travel, and  
       <li>telepathy, 
   </ul>
   <p>and is further discussed below.</p>

複数の「構造」段落からなるこのような「論理」段落のスタイルを簡単に設定したい作成者は、p要素の代わりにdiv要素を使用できます。

したがって、たとえば上記の例は次のようになります。

   <div>For instance, this fantastic sentence has bullets relating to
   <ul>
     <li>wizards,  
     <li>faster-than-light travel, and  
     <li>telepathy,
   </ul> 
   and is further discussed below.</div>

この例にはまだ5つの構造段落がありますが、今では作成者は例の各部分を個別に考慮する必要がなく、divだけをスタイルできます。

45
kapa

HTMLでは常に、p要素にテキストとテキストレベルのマークアップのみを含めることができ、たとえばリストを含めることはできません。したがって、p要素が開いていて、</p>のようなブロックレベル要素の開始タグが検出された場合、ブラウザーは<ul>終了タグを意味します。あなたの例では、</p>の後の</ul>タグはホームレスであり、通常は無視されます。

5
Jukka K. Korpela

<p>には、子としてインライン要素のみを含めることができ、ブロック要素を含めることはできません（たとえば、 [〜＃〜] mdn [〜＃〜] を参照）。 <ul>一方、ブロックレベルの要素です（ [〜＃〜] mdn [〜＃〜] ）！

ご覧のようにブラウザーがコードを解釈する理由は、HTML5解析仕様にあります。仕様はあなたの例に非常によく似た例をリストしています： whatwg link 。

関連するもう1つの興味深い質問は次のようになります。 HTML：オプションの終了タグを含めるか、除外しますか？

4
Sirko