Element nesting

I mentioned early on that we can think of HTML elements as “boxes”. This is an excellent metaphor. Keep it in mind and it will help to prevent the most common mistakes.

If I have two boxes, and one fits inside the other, then I can “nest” the smaller box in the larger one. If you think of your web page/document as a large element comprised of smaller elements nested inside each other, then you can see that the page hierarchy mirrors the HTML structure.

You already know a few elements:

Now, let’s add a few more. We will show a full page hierarchy, but a simple one.

Structuring a web page

The outermost “box” of a web page is the top-level HTML element. Unsurprisingly, that is the html element itself.

Inside the html element, we can nest a body element. This is the visible portion of the page. (We will learn how to add hidden data to the page later.)

Inside the body, we might have an article. So we can use the article element. Our article has a heading, so this is a first-level heading element, h1, followed by a few paragraphs (p elements).

We might even break our article into sections, each with its own subheading. We can use the section element and the 2nd-level heading element, h2.

To keep this easy to understand, we need to organize our code very carefully. It is a good idea to follow standard practices and good design principles, such as the proximity principle. We will indicate nesting with indentation. Typically, we will set our tab width to two spaces.

So what does this look like in practice. Notice how nesting elements properly and using indentation and whitespace makes our code easy to understand and reason about.

Using the correct HTML elements also helps us to understand what each bit of text means. Is it a paragraph? A link? An article? The name of the element clues us in.

A basic page in HTML 
<html>
  <body>
    <article>
      <h1>Article title</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing
        elit. Proin laoreet, est ultrices rutrum placerat,
        metus nulla lacinia nulla, et pellentesque nunc quam
        sed magna. Lorem ipsum
        <a href="https://sitebender.io/basic-html">dolor sit</a>
        amet, consectetur adipiscing elit. Pellentesque
        id velit pharetra, placerat lectus et, dapibus mauris.
      </p>
      <p>
        Nulla sit amet consequat mi, eu fringilla massa. Vestibulum
        ante ipsum primis in faucibus orci luctus et ultrices
        posuere cubilia curae; Praesent imperdiet mauris suscipit
        nulla posuere, id porttitor arcu venenatis.
      </p>
      <section>
        <h2>Section subtitle</h2>
        <p>
          Etiam ac turpis aliquam, posuere ligula eget, molestie
          dolor. Etiam sed porta libero. Proin pulvinar mollis
          justo vel efficitur. Nunc ac quam sapien. Cras porta
          tempor dui sed efficitur.
        </p>
    </article>
  </body>
</html>

Boxes in boxes in boxes. Labeled front and back with HTML tags. Attributes in the opening tag, if needed.

We also use &lduqo;syntax highlighting” to make it easier to spot the tags and attributes. Line numbering (not part of the code) is also common.

You can actually copy and paste this code into a text file, give it an .html extension, open it in a browser, and see the page.

The most important thing to know about nesting

HTML elements must be fully nested. That is an element cannot start inside one box and end in another. Each element must be entirely inside its “parent” element.

So this is all wrong:

Bad element nesting. 
<p><span></p></span>

The span element must be entirely inside the p element:

Good element nesting. 
<p><span></span></p>

Nesting makes this most clear, as the above syntax-highlighted example shows. That example uses the design principle of alignment. Note how the opening and closing tags are aligned to the same indentation with their content indented further.

What about empty elements? Is that a thing? Yes, it is. And it is next.

The other most important thing to know

Even if you nest an element fully inside another, you might still be doing it wrong.

Each element has a list of allowed child elements. The easiest way to check is on Mozilla Developer Network.

Look up the element and scroll down to the “Technical summary”. There you will find “Permitted content”. You may have to click through to a content type, such as “interactive content”, to get to the list of actual elements.

The simplest thing to remember is that inline elements can go inside block and inline elements, but block elements cannot go inside inline elements. Usually. And there are other examples, too. Such as that a link cannot go inside another link. How would that work?

But learn these things as you go along: just in time.

Next: Empty elements

Previous: Attributes and links

Table of contents