Nesting and Family Relationships

Let's look at the page we have built so far:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My First Page</title>
	</head>
	<body>
	</body>
</html>

Some elements are inside other elements: head and body are inside html, and meta and title are inside head. Remember that the content of an element can be other elements. When we put an element inside another one, we say that we nest it.

To describe how nested elements relate to each other, we borrow words from the family:

• A parent is the element that another element is directly inside. html is the parent of head and body.
• A child is an element directly inside another element. title is a child of head.
• Siblings are elements with the same parent. head and body are siblings, and so are meta and title.

Now let's give body some children, so that something finally shows up on our page. Besides the h1 heading, we'll use the p element, which stands for paragraph. We'll look at paragraphs more closely in the next lesson.