Why is the W3 Validator stating that there is a closing
with no opening one?

Question

I tried to validate the following HTML code

<!DOCTYPE html>
<html>
<head>
  <title>hello</title>
</head>
<body>
  <p>
    This is some <b>text</b>
      <ul>
        <li>A bullet point</li>
        <li>another bullet point</li>
      </ul>
  </p>
</body>
</html>

It renders as expected, but the Validator throws the following error:

It looks to me that there is a proper pair (...), why the error then?

http://stackoverflow.com/questions/8397852/why-p-tag-cant-contain-div-tag-inside-it — CodeCaster, Oct 24 '16 at 12:53
Invalid markup can produce all kinds of results in all kinds of things. — Rob, Oct 24 '16 at 12:59
@Rob Admittedly this error is rather unintuitive and non-obvious though… — deceze, Oct 24 '16 at 12:59
@deceze It should be immediately obvious from the very inclusion of a `
`. — Rob, Oct 24 '16 at 13:01
@Rob *If* you know that `ul` inside a `p` is a no-no… If you don't expect that restriction, this particular error message is rather confounding. — deceze, Oct 24 '16 at 13:02
@deceze The same can be said of any error produced by any error checking software. I understand your point if one is coming from a point of view that does not know HTML and does not understand error checking. — Rob, Oct 24 '16 at 13:04
@Rob Just saying that *"looks like you're trying to nest a `ul` inside a `p`, be advised that the `p` will be prematurely closed here"* would be a much easier to digest error message. I'm also aware that that's much harder to produce for the validator, given that `
` isn't even invalid syntax… — deceze, Oct 24 '16 at 13:06

deceze · Accepted Answer · 2016-10-24T12:51:10.247

Look at your DOM inspector how it actually renders. You'll see something like:

<p>...</p>
<ul>...</ul>

A ul element cannot be nested inside a p element. The presence of <ul> implicitly closes the  at that point. The trailing  is therefore left without context.

The reasoning in the official specification is:

p
Permitted contents: Phrasing content.
https://www.w3.org/TR/html-markup/p.html

ul
Permitted parent elements: Any element that can contain flow elements.
https://www.w3.org/TR/html-markup/ul.html

score 3 · Answer 2 · edited Oct 24 '16 at 15:20

3

Because you have nested a list in your paragraph which is not allowed for them.

Try this:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <p>This is some <b>text</b></p>
    <ul>
        <li>A bullet point</li>
        <li>another bullet point</li>
    </ul>
</body>
</html>

w3schools p-Tag

edited Oct 24 '16 at 15:20

julianstark999

3,450
1
27
41

answered Oct 24 '16 at 12:45

Shaheen K

124
1
7

And why is that forbidden? – Reporter Oct 24 '16 at 12:45
1

More specifically, [`
` elements can only contain Phrasing Content](https://developer.mozilla.org/en/docs/Web/HTML/Element/p).
– Phylogenesis Oct 24 '16 at 12:47
Because it doesn't conform to the validator standards... Why do you want to put your list in a Paragraph? P is usually for blocks of text not lists..... – Shaheen K Oct 24 '16 at 12:48

Goutam Singha · Answer 3 · 2016-10-24T12:56:13.610

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

<!DOCTYPE html>
<html>
<head>
  <title>hello</title>
</head>
<body>
  <div>
      <p>This is some <b>text</b></p>
      <ul>
        <li>A bullet point</li>
        <li>another bullet point</li>
      </ul>
  </div>
</body>
</html>

edited Oct 24 '16 at 12:56

answered Oct 24 '16 at 12:51

Goutam Singha

142
1
11

1

Be careful, ` ` specifies HTML5, but you are referencing the HTML4 specification. – Phylogenesis Oct 24 '16 at 12:52
Thanks, but I gave the HTML5 documentation. Please see it – Goutam Singha Oct 24 '16 at 12:57
2

And from your (edited) link: *The distinction of block-level vs. inline elements is used in HTML specifications up to 4.01. In HTML5, this binary distinction is replaced with a more complex set of content categories. The "block-level" category roughly corresponds to the category of flow content in HTML5, while "inline" corresponds to phrasing content, but there are additional categories.* – Phylogenesis Oct 24 '16 at 13:02

score 0 · Answer 4 · answered Oct 24 '16 at 12:49

0

I am guesing that the p tag is not ment to wrap a list http://www.w3schools.com/tags/tag_p.asp

answered Oct 24 '16 at 12:49

Marcus

1,850
1
12
24

score 0 · Answer 5 · answered Oct 24 '16 at 12:51

Quick answer would be found in here. You should end your  tag before you add a list. Or you can also just don't put a  tag like below:

<!DOCTYPE html>
<html>
<head>
  <title>hello</title>
</head>
<body>
  This is some <b>text</b>
  <ul>
    <li>A bullet point</li>
    <li>another bullet point</li>
  </ul>
</body>
</html>

Why is the W3 Validator stating that there is a closing with no opening one?

5 Answers5

Why is the W3 Validator stating that there is a closing
with no opening one?