33

ul要素の子として要素を持つことができないのはなぜpですか?

次のコードでWebページを作成しました

<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' がうまく機能しませんでした)。

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

4

3 に答える 3

47

段落要素にリストを配置することは禁止されていることを明確に述べている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 のみをスタイル設定できるようになりました。

于 2012-05-15T13:10:28.370 に答える
5

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

于 2012-05-15T14:22:24.847 に答える
4

<p>子としてインライン要素のみを持ち、ブロック要素を持たないことができます (たとえば、MDNを参照)。<ul>一方、ブロックレベル要素 ( MDN ) です!

ブラウザーがコードを解釈する理由は、HTML5 の解析仕様にあります。仕様には、あなた自身のものと非常によく似た例がリストされています: whatwg link。

関連するもう 1 つの興味深い質問は次のとおりです。HTML: オプションの終了タグを含めますか、それとも除外しますか?

于 2012-05-15T13:10:16.830 に答える