web-dev-qa-db-ja.com

スコープ内にp要素はありませんが、p endタグが表示されます。w3c検証

私のHTMLは以下の通りです。すべての要素を開いて閉じました。それでもw3cでチェックするとエラーが表示されます。わかりません。

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Untitled Document</title>
    </head>

    <body>
        <p>
            <div class="inr_content clearfix">
                 <div class="col2 first fl">
                      to provide a drive-in services.
                 </div>
                 <div class="col2 last fr">
                      to provide a drive-in services.
                 </div>
            </div>
        </p>
    </body>
</html>
htmlw3c-validationhtml-validation
42
Sam IR

これは、無効なpタグ内にブロックレベルの要素をネストしているためです。 span、a、imgなどのインライン要素のみをpタグ内にネストできます。したがって、マークアップは無効です。次のようなものを作成することを検討してください

<div class="inr_content clearfix">
   <div class="col2 first fl">
      <p>to provide a drive-in services.</p>
   </div>
   <div class="col2 last fr">
      <p>to provide a drive-in services.</p>
   </div>
</div>

W3Cから[1] ：

P要素は段落を表します。ブロックレベルの要素（P自体を含む）を含めることはできません。

1- 参照

50
Mr. Alien

p要素 の構文はdiv子を許可せず、終了タグ</p>を省略できるため、バリデーター（およびブラウザー）は、p要素を解析するときに</p>タグに遭遇すると<div>を意味します。つまり、pが解析されている（または「開いている」）場合、div要素の開始タグは、マークアップが次のように暗黙的に閉じます。

<body>
    <p>
        </p><div class="inr_content clearfix">
             <div class="col2 first fl">

これは、空白のみを含むp要素があることを意味します。したがって、後で表示される</p>タグには一致する開始タグがなく、無効として報告されます。ブラウザはそのようなホームレス終了タグを無視しますが、バリデーターはそれらを報告する必要があります。

最小限の変更は、</p>タグを削除することです。これが適切かどうかは、何を望むかに依存します。 <p>タグを削除すると、p要素も削除され、レンダリングに影響します。 p要素にはレンダリングされたコンテンツはありませんが（コンテンツの高さは0）、デフォルトの上部マージンと下部マージンがあり、空の垂直スペースが作成される可能性があります。

そのようなスペースが必要ない場合は、<p>タグを削除してください（もちろん</p>とともに）。ある程度のスペースが必要な場合、通常はタグを削除することをお勧めしますが、CSSで、最上位のdiv要素に適切なmargin-top値を追加で設定します。

空白のみを含むp要素はHTML5で許可されていますが、推奨されていません。これは、いわゆる palpable content ：に関連する一般的な推奨事項の一部です。「コンテンツモデルがフローコンテンツまたはフレージングコンテンツを許可する要素には、コンテンツに少なくとも1つのノードが含まれている必要があります。また、テキストは通常​​触知可能なコンテンツですが、空白のみで構成されている場合はそうではありません。

2
Jukka K. Korpela

<p>タグ内にdivを意味的に配置することはできません。

0
probablyup