DIV tag inside of P looking weird in the DOM tree

Looking at any web inspector, the following markup is outputting unexpected (at least to me) results:

<p>
    <div>Here's a div!</div>
    And here's some text. 
    <div>Here's another div!</div>
</p>

Using Chrome's Dev Tools, I'm seeing the DOM tree look like this:

Maybe I'm having a brain fart, but shouldn't the DIV be inside of the P tag?

Answers


It is not valid html to put a <div> inside a <p>. The <p> element is only meant to include inline elements. <div> is a block element. See section 9.3.1 of the HTML Specification for more info.

Chrome will sometimes rewrite bad HTML to be valid.

Here is a related/duplicate question.


Need Your Help

ASP.NET MVC authentication using custom database instead of ASPNETDB?

c# asp.net sql-server asp.net-mvc authentication

I already have a User table in my primary application database with an email address (which will act as the user name) and a password. I would like to authenticate using my database instead of the

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.