Rules on nesting HTML

[adamwestrop]

Can someone please check my understanding.

So I understand that inline elements can only have other inline elements nested inside them.

I understand that block elements can have inline or other block elements nested inside, e.g. <p> inside <blockquote> or <ul> inside the <p> for block and obviously an <img> inside a <p> for inline.

What about empty tags... E.g. Such as the <img> tag? I assume you can't have anything nested inside the tag?

Any other tags where no nesting is possible???

[Apostropartheid]

Can someone please check my understanding.

So I understand that inline elements can only have other inline elements nested inside them.

I understand that block elements can have inline or other block elements nested inside, e.g. <p> inside <blockquote> or <ul> inside the <p> for block and obviously an <img> inside a <p> for inline.

What about empty tags... E.g. Such as the <img> tag? I assume you can't have anything nested inside the tag?

Any other tags where no nesting is possible???

Lists, for some strange reason, cannot be a child of ps.
Empty elements cannot have anything inside them, no.

[webdev1958]

Lists, for some strange reason, cannot be a child of ps.

That's because from here:

> In HTML as currently defined, if you have, say,
>
> <p>foobar<ul>
>
> then a browser is required to infer a missing </p> before the <ul> tag,
> i.e. an <ul> element implicitly closes an open <p> element. This is because
> <ul> is not allowed inside <p> and the <p> element is defined as having an
> optional closing. If <ul> were allowed inside <p>, then where would the <p>
> element end?

[Apostropartheid]

That's because from here:

Yes, I know (: It doesn't make it any less strange, though.

[webdev1958]

if the closing <p> was missing in the code, how would the browser then know whether to close the <p> at foo, foob or foobar?

[alykins]

if the closing <p> was missing in the code, how would the browser then know whether to close the <p> at foo, foob or foobar?

That is not what they are saying in the article...

I do not foresee anyone ever coding:

<p> something <ul>
text text text </p> more text <ul> etc...

their example is really messed up and would make no sense coding that way ever... What Apost (and the article) is saying

Lists, for some strange reason, cannot be a child of ps.

is you cannot have a ul inside a p eg

<p>
  <ul>
    <li> item one </li>
    <li> item two </li>
  </ul>
</p>

the article seems to be saying that if you had this

<p> text text text <ul> <li> item one </li> </ul> more text </p>

then the browser would actually render it as

<p> text text text </p>
 <ul> <li> item one </li> </ul> more text </p>

which is invalid and this happens because

In HTML, it has always been a rule that a <p> eleement
> may contain "text-level" or "inline" or "phrasing" content only - no <ul> or
> <ol> elements for example.

which i don't feel provides a "good" reason but that seems to be it non the less. (**as a reason the following happens)

and more directly causing the issue

an <ul> element implicitly closes an open <p> element.

I think this is an error in the system, but I am not w3

[webdev1958]

you might be right. The article is a bit confusing and I thought I understood it until I saw your post.

But in any case, semantically it doesn't make sense to me to have a <ul> or any other block level element within a <p> element. You can just close the p, markup a list and then open another <p> if required.

[Apostropartheid]

That is not what they are saying in the article...

I do not foresee anyone ever coding:

<p> something <ul>
text text text </p> more text <ul> etc...

their example is really messed up and would make no sense coding that way ever... What Apost (and the article) is saying



is you cannot have a ul inside a p eg

<p>
  <ul>
    <li> item one </li>
    <li> item two </li>
  </ul>
</p>

the article seems to be saying that if you had this

<p> text text text <ul> <li> item one </li> </ul> more text </p>

then the browser would actually render it as

<p> text text text </p>
 <ul> <li> item one </li> </ul> more text </p>

which is invalid and this happens because



which i don't feel provides a "good" reason but that seems to be it non the less. (**as a reason the following happens)

and more directly causing the issue


I think this is an error in the system, but I am not w3

you might be right. The article is a bit confusing and I thought I understood it until I saw your post.

But in any case, semantically it doesn't make sense to me to have a <ul> or any other block level element within a <p> element. You can just close the p, markup a list and then open another <p> if required.

The article says that the browser is forced to close the p tag.

If one wrote code like this:

<p>Lorem ipsum &c.
<ul>
  <li>Dolor</li>
</ul>
Sit amet</p>

the browser should see:

<p>Lorem ipsum &c.</p>
<ul>
  <li>Dolor</li>
</ul>
Sit amet</p>

The only reason that it's confusing is because it's absurd.

[JamesOxford]

So I was vaguely aware of this rule. This rule only exists because that is the way it has always been. In practice, does it really matter, and with which document schema(s)? Will modern browsers really have that much trouble interpreting a page with an un-ordered list inside a paragraph? I have trouble believing they would, especially if used in combination with CSS.

The article referred to doesn't make a whole lot of sense either. It says

If you are suggesting that HTML should be modified to allow lists inside
> <p>, then I'm afraid the suggestion has no hope of being accepted. The main
> reason is that such a change would break existing pages.

.

This isn't really correct. The article is in reference to html 5. You wouldn't need to change any existing schema on which legacy pages are based. They can declare their schema, and be interpreted by browsers according to the schema declared in the existing !DOCTYPE tag.

[Apostropartheid]

This isn't really correct. The article is in reference to html 5. You wouldn't need to change any existing schema on which legacy pages are based. They can declare their schema, and be interpreted by browsers according to the schema declared in the existing !DOCTYPE tag.

Unfortunately that's not how browsers work: they tend to just have a universal "standards mode" and don't particularly care which doctype is declared. Hence why <!DOCTYPE html> is all that's needed to trigger standards mode in HTML5, not because it's new but because that's how existing browsers detected standards mode.