How to resolve "No p element in scope but a p end tag seen" error in W3C Validation?

Asked 13/1, 2014 at 6:4 Answered 13/1, 2014 at 11:14

My HTML is as as below. I have opened all elements and closed them. Still when I check it on the W3C's validation service, it shows an error about "No p element in scope but a p end tag seen"

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>

Sherise answered 13/1, 2014 at 6:4 Comment(1)

Found some good reason here (after reading random questions on internet): developer.mozilla.org/en-US/docs/Web/HTML/Element/p

Paragraphs are block-level elements, and notably will automatically close if another block-level element is parsed before the closing </p> tag.

– Jaunita 6/7 at 11:34

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}

Eugenol answered 13/1, 2014 at 6:5 Comment(3)

i use wordpress and automatically add this when i create div in editor – Sherise 13/1, 2014 at 6:9

@user2500837 though it shouldn't do that, if it does, than either toggle the editor mode to code, and remove it, else, remove it using jQuery/JavaScript on runtime – Eugenol 13/1, 2014 at 6:11

Thank you for your explanation! I thought I was going crazy, as I know  is a block element. So I assumed it can contain block elements. – Leitman 30/3, 2014 at 23:57

Since the syntax of the p element does not allow a div child, and the end tag  may be omitted, the validator (and a browser) implies  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  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  tag. Whether this is adequate depends on what you want. Removing the  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  tag (along with  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.

Beano answered 13/1, 2014 at 11:14 Comment(0)

You can't semantically put a div inside a  tag.

Nomology answered 13/1, 2014 at 6:6 Comment(0)

Recommended topics

Hot tags