No p element in scope but a p end tag seen.w3c validation

こ雲淡風輕ζ 提交于 2019-12-03 05:32:02

问题


My HTML is as as below. I have opened all elements and closed them. Still when I check it on w3c it shows error. I cant figure it out.

<!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>

回答1:


That's because you are nesting a block level element inside the p tag which is invalid. You can only nest inline elements such as span, a and img inside p tag. So your markup is invalid, consider making something like

<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>

From W3C[1] :

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

1 - Reference




回答2:


Since the syntax of the p element does not allow a div child, and the end tag </p> may be omitted, the validator (and a browser) implies </p> when it encounters a <div> tag when parsing a p element. That is, when p is being parsed (or “is open”), the start tag of a div element implicitly closes it, as if the markup had:

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

This means that there is a p element with only whitespace in it. The </p> tag that appears later thus has no matching start tag, and it is reported as invalid. Browsers ignore such homeless end tags, but validators have to report them.

The minimal change is to remove the </p> tag. Whether this is adequate depends on what you want. Removing the <p> tag as well would remove the p element, and this would affect rendering. Even though the p element has no content rendered (content height is 0), it has default top and bottom margin, possible creating some empty vertical space.

If you do not want such space, just remove the <p> tag (along with </p> of course). If you do want some space, it is usually still best to remove the tag, but then you would additionally set, in CSS, some suitable margin-top value on the top-level div element.

Even though p elements containing only whitespace are allowed in HTML5, they are not recommended. This is part of the general recommendation related to so-called palpable content: “elements whose content model allows any flow content or phrasing content should have at least one node in its contents that is palpable content”. And text is usually palpable content, but not if it consists of whitespace only.




回答3:


You can't semantically put a div inside a <p> tag.



来源:https://stackoverflow.com/questions/21084870/no-p-element-in-scope-but-a-p-end-tag-seen-w3c-validation

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!