What is the point of nesting the <p> element in a <div> element?


#1

Question

In steps 1 and 2 of this exercise, both <p> elements display in the same exact way. As it doesn’t seem like anything special happened here, what is the point of nesting the <p> element in a <div> element?

Answer

In this case, this is done purely for demonstrative purpose. In the future you will find that <div> elements are often used to group related content. This can serve to give a page some added structure and to allow for more modular styling.


FAQ: Learn HTML Elements - Intro to HTML - HTML Structure
#2

It is primarily for the content creator and used to distinguish between paragraphs and sets of content.


#3

Can we use the div element in the following way?

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

If we cannot use it then please explain why


#4

no, as we can see in the documentation:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html

body must a child of html, the documentation shows the Permitted content and Permitted parents.


#5

I’m just setting out on learning this myself, but if I’m right, I’d say this is done because a body can have multiple divisions, but divisions cannot have multiple bodies and therefore the multiple divisions must be contained within the body.


#6

everything in the body is whats being shown on the screen on the webpage so having divisions in the inside would make sense right ?


#7

There is a hierarchy of tags in html. The html tag itself is the overall ‘parent’ tag. Followed by:
head which is the header section of the page and then the body that includes everything else. Divs are inside the body tags.


#10

When treated as having meaning, writing a number of paragraphs in a division is a way of telling the source reader that they are all grouped together. We don’t send a baker’s dozen out in the customer’s hands, we place them in a box, with wax paper between the layers so the frosting doesn’t stick to the paper.

Think back to what we learned about writing and outlining of essays going back to grade 8, and how that same process applied all the way through secondary and even tertiary education. HTML is a document just like that essay and the better we outline it, the easier it will be to interpret the source, and eventually present (which is a totally separate concern) the content. We give meaning to the content by how we structure it.


#12

Hello,

Since head and body are siblings, is it correct to write:

<head>Hello World</head>

<body>

<p>This is a page that.... etc</p> 

</body>

skipping totally <div> that was there for demo reasons?


#13

No, it is not. HEAD is not a content container. It is reserved for meta data that is not visible to the visitor. All page content belongs in the BODY.

The only visible content in the HEAD is the <title>Hello World</title> which appears in the window’s title bar, or tab, not on the page itself.

The HEAD is where we declare things like what is the document type and root element? What is the human readable language used in the document? What is the character encoding so user agents can parse correctly? What background resources are needed in the parsing and page draw processes and how do they relate to the page? What is the title of the page (already mentioned)? What special cataloging information is required for this document?

<DOCTYPE html>

The above tells a user agent that this has an HTML5 document type, with the root element being, <html></html>.

<html lang="en">

The above tells the user agent that the human readable language is English.

<head>
  <meta charset="UTF-8">
  <title>Hello World</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="author" href="http://www.example.com">
</head>

Above we declare character encoding as UTF-8, the de facto standard adopted by the international web community. It is before the title so that any special characters are recognized and printable. We describe the relation and location of the external resource needed by this document; and, lastly we insert a link to the author’s own page or site. Not required, as such, but I included it as an example for rel, the relation attribute.

As for writing paragraphs directly into the BODY, that may be valid but it is not organized and can be wieldly to work with when it comes to presentation. Having page sections with their own containers makes short work of this, and makes the document easier to read and analyze (by search engines, for example).


#14

I clarified a lot of things with the details that you covered Roy.
Μany, many thanks for your reply!


#15

Errata: The doctype is not in the head, d’oh! And neither is the root element, <html> they can be seen above as being at the very start of the document, though.


#16

OK, thanks for checking on this.


#17

i always though that the point of using the <p></p> was for spacing sentances and or using it to imput words


#18

Markup is for documenting content, not for spacing or presentation.


#19

ohh woops thanks for correcting me


#20

This is pretty late response, but i just want to say that was the best explanation i have ever read thank you !


#21

Well said. It’s just like how the human body has multiple divisions: the digits (fingers and toes), the appendages (arms and legs), and the torso.


#22

A more appropriate analalogy would be a tree which can have only one root, and one trunk. It can have many branches, both off the trunk and off the branches themselves. The content (text nodes) would be the leaves.