Differencebetween <P> and <Div>

What is the difference between p , div and span in HTML&XHTML?

p and div elements are block level elements where span is an inline element and hence margin on span wont work. Alternatively you can make your span a block level element by using CSS display: block; or for span I would prefer display: inline-block;

Apart from that, these elements have specific semantic meaning, div is better referred for a block of content having different nested elements, p which is used for paragraphs, and span is nothing but an empty element, hence keeping SEO in mind, you need to use right tag for right thing, so for example wrapping the text inside div element will be less semantic than wrapping it inside a p

Difference between putting text in h1 , h2 , p or just div

Actually SEO, CSS, readability, and semantics.

What's worth to mention is that browsers automatically add some white space (a margin) and set display to block before and after, <p> tags and they are meant to hold text, however, they are not aware of whitespaces, unlike other tags like pre, eventually both are tags to hold text values.

headings <h1>....<h6> are really a role player in the matter of SEO and their count on each page matters, along with readability obviously!

<div>'s are meant to divide down your elements to structure your page, and other tags like sections, articles header...etc are just a kind of aliases of the div we know, and let's face it with their names they are making our life easier!

Difference between p and div as block elements

The <p> element has default margins. Furthermore, the non-floating <p> element's top margin collapses with the <body> element, while the floating <p> element's margin does not. This is what results in the two paragraphs being misaligned: the floating <p>'s outer (margin) edge is aligned with the inner (border) edge of <body>, while the inner edges of both the non-floating <p> and <body> are aligned with each other.

<div> has no such default margins, so the two <div> elements align just fine.

The others talk about semantic differences between the two elements — while that isn't directly pertinent here since this is a matter of CSS and not HTML, it does explain why <p> comes with default margins in the first place: because paragraphs are individual runs of text that are visually separated by whitespace.

What’s the difference between the CSS selectors “div p” and “div p”?

div > p selects only the <p> elements that are immediate children of a <div>.

So:

div > p

will select this paragraph:

<div>
    <p>This is a paragraph</p>
</div>

but will not select this paragraph:

<div>
    <table>
        <tr>
            <td>
                <p>This will not get selected</p>
            </td>
        </tr>
    </table>
</div>

What is the non-semantic difference between p and div ?

Per your links (in the Permitted content section), <p> is allowed to contain phrasing content, while <div> is allowed to contain flow content (which includes the phrasing content element types).

Sample Image

On a practical level, browsers also typically apply margin to <p>.

Why can't the p tag contain a div tag inside it?

An authoritative place to look for allowed containment relations is the HTML spec. See, for example, http://www.w3.org/TR/html4/sgml/dtd.html. It specifies which elements are block elements and which are inline. For those lists, search for the section marked "HTML content models".

For the P element, it specifies the following, which indicates that P elements are only allowed to contain inline elements.

<!ELEMENT P - O (%inline;)*            -- paragraph -->

This is consistent with http://www.w3.org/TR/html401/struct/text.html#h-9.3.1, which says that the P element "cannot contain block-level elements (including P itself)."

OK to have text in div without paragraph tag?

Yes, it is ok to use a <div> element without <p>.

A <p> would tell that the text within a <div> element is split into paragraphs, thus if you have text split into paragraphs, you should use <p>; on the other hand, a <p> cannot contain elements other than so-called phrasing content; thus you cannot have a <div> inside a <p>.