<div> vs. <p> in <body>

html-css

#1

What is the difference if we use <p> under <body> directly and when used inside <div >?


#2

One of the tenets of well formed documents is structure, another is semantics, and another is brevity. This question falls under all these.

<body>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</body>

is brief, about as brief as four paragraphs can be marked up. Assuming the missing bits are present, this is perfectly valid markup.

<body>
  <div>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>
</body>

The above has more structure, but it is arbitrary, though it could be founded as a principle that says we should exclude the BODY as a parent container (apart from the fact that it is). Just like we do not wrap content with <html></html> (the document root) we can treat the body element as the content root. It is the yard, and the divisions are the buildings and outbuildings in that yard.

See how we can justify wrapping the paragraphs in the DIV? This is called rationalization whereby we legitimize what we are doing on the basis that it is well founded. A gray area, to be sure, but by such reasoning we can say that the second example is better defined by the added structure, and this leans toward semantics in that it can add or support meaning.

Either way is valid. Our aim should be to let the structure give a reader (and search engine or screen reader) some idea of the content flow, its relative importance and areas of key focus.

From here we can get into why HTML5 introduced so many semantic tags, and further explore the above starting code. More on that with your reply.