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:
-
h1
,h2
, etc.,p
, anddiv
are all block elements. -
span
anda
(anchor) are inline 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.
<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:
<p><span></p></span>
The span
element must be entirely inside the p
element:
<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