CODEWITHSUNDEEP
csshtml
Dramal
Dramal

Reputation: 177

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

They are both block elements. So why can I nest a <div> inside a <div>, but can't nest a <p> inside a <p>? (Well, I can, but the second <p> just starts a new block.)

I have read about the div tag and p tag, but I don't see anything there that explains it. If it is there, then it goes over my head.

For the record, I do not want to nest a p tags, I am just trying to understand the fundamentals more.

Upvotes: 0

Views: 154

Answers (2)

fnostro
fnostro

Reputation: 4591

both are block elements, but <p> tags come predefined with some margins/padding. you can inspect both elements in any modern browser and see the default properties

funny thing is, in the name of consistency, all elements have redefined by things like bootstrap/boilerplate CSS files that give all elements the same starting look and feel so we no longer have to guess which tags have what default properties. Which sort of goes against the original HTML spec for the sake of our sanity

Upvotes: 1

ceejayoz
ceejayoz

Reputation: 179994

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).

enter image description here

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

Upvotes: 2

Related Questions