HTML Structure

In previous exercises, we introduced the structure of HTML elements and the document type declaration. These are parts of the HTML structure. In this exercise, we will look at another integral part of the HTML structure - Element Nesting.

In the previous exercise, you may have seen a similar code:

<html>
	<head>
	</head>
	<body>
		<p>Hello!</p>
	</body>
</html>

For now, we don't need to know what the code means, but let's look at the concept of nesting.

If we remember the structure of elements, we could say that the head element and the body element are the content of the html element. This is obviously true, and we say that the head and body elements are nested within the html element.

However, in practice, we don't describe an element as being nested within another because it is cumbersome and does not describe other relationships between elements well. For example, how would we describe the relationship between the head and body elements? That's why we use relationships that we are all familiar with, such as parent, child, or sibling.

When we come back to the question of how we would describe the relationship between the head and body elements, we would say that the head element is a sibling of the body element. Similarly, we could say that the head element is a child of the html element, and conversely, the html element is the parent of the head element.

Instructions

Create the html element.

Create the head element as a child of the html element you created in the previous instruction.

Create the body element as a sibling of the head element, below the head element you created in the previous instruction.

Start programming for free

4/9