Most pages are built by putting elements inside other elements. This is called nesting.
<body>
<h1>Juniper Books</h1>
<p>Open <strong>every day</strong>.</p>
</body>Here h1 and p are inside body. The strong element is inside the p. We say body is the parent and h1 and p are its children. Elements with the same parent are siblings.
The family tree
You can draw any page as a tree:
htmlheadbodyh1pstrong
The browser builds this same tree in memory. It is called the DOM, and CSS and JavaScript both use it to find the elements you want to change. You will use the tree idea again and again.
The nesting rule
Close elements in the reverse order you opened them. The last one opened is the first one closed.
<!-- Correct -->
<p>This is <strong>important</strong> news.</p>
<!-- Wrong: tags cross over -->
<p>This is <strong>important</p></strong>Crossed tags
strong opens inside the paragraph but closes outside it. Browsers will try to repair it, but the result can differ between browsers. Keep every element fully inside its parent.Some elements have limits
Not every element can go inside every other. A paragraph cannot contain another paragraph or a heading. A list item belongs inside a list. You will learn the rules as you meet each element, and a validator (see Validating and Debugging HTML) will tell you when you break one.