HTML Elements & Nesting
Understand elements deeply: how they nest inside each other, and which ones have no closing tag.
What you will learn
- Define an HTML element precisely
- Nest elements correctly (open and close in the right order)
- Recognise empty (self-closing) elements
What exactly is an element?
An element is everything from the opening tag to the closing tag, including the content in between.
<h1>My heading</h1>This one element has three parts: the opening tag <h1>, the content My heading, and the closing tag </h1>. Together they make a complete element — and that whole thing is what can be nested inside others next.
Nesting: elements inside elements
Elements can contain other elements. This is called nesting. The golden rule: the last tag you open is the first tag you close — just like closing boxes inside boxes.
<body>
<div>
<h2>A nested heading</h2>
<p>A paragraph with a <strong>bold</strong> word inside it.</p>
</div>
</body>Read the boxes from outside in: the <div> is the outer box; inside it sit an <h2> and a <p>; and inside the <p> sits a <strong> around one word. Each inner element is fully closed before its outer one closes — that is correct nesting.
Watch out: Never overlap tags. <b><i>text</b></i> is wrong because <b> closes before <i>. The correct order is <b><i>text</i></b> — open b, open i, close i, close b.
Tip: Indent nested elements (add spaces) so the structure is easy to read. The browser ignores the indentation, but humans love it — and clean code is a professional habit.
Empty elements (no closing tag)
A few elements have no content and no closing tag — they are called empty or self-closing elements. The most common are <br> (line break), <hr> (divider) and <img> (image).
<p>Line one<br>Line two</p>
<hr>
<img src="https://picsum.photos/200/80" alt="Sample">Notice none of these three have a closing tag. <br> pushes “Line two” onto a new line, <hr> draws a horizontal divider line, and <img> pulls in a picture. They each do their job alone — there is nothing to put “between” an opening and closing tag, so there is no closing tag at all.
Note: Output: Line one Line two ——————————— (a horizontal divider) [a sample image appears here]
Q. Which of these is correctly nested?
✍️ Practice
- Build a
<div>that contains a heading, a paragraph, and a list — all neatly nested and indented. - Fix this broken code:
<p><strong>Important</p></strong>.
🏠 Homework
- Take any paragraph and nest three different inline elements inside it (e.g.
<strong>,<em>,<a>) without overlapping.