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

StackOverflow https://stackoverflow.com/questions/21084870

Question

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>
Was it helpful?

Solution

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

OTHER TIPS

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.

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top