Unit 2 · HTML: structure and meaning
How one missing closing tag breaks a page
A closing tag tells the browser where an element ends. Leave out </h1> and the browser guesses, so the paragraphs that follow can end up inside the heading, huge and bold. Close the heading; do not restyle the paragraphs.
The mix-up
What people often think
“Closing tags are optional decoration.”
What the tutor says
A closing tag tells the browser where a box ends. Without </h1>, the browser guesses, and everything after can end up inside the heading.
How it works
HTML is a tree of boxes inside boxes. Coming after something is not the same as being inside it: a heading and the paragraph below it should be siblings, both directly inside the body.
When text suddenly looks too big, it is tempting to shrink it with CSS. That hides the symptom while the structure stays wrong, and screen readers still announce the whole block as one heading. Fix where the element ends.
Side by side
<h1>Today’s menu
<p>Sourdough loaf</p>
<p>Cinnamon bun</p><h1>Today’s menu</h1>
<p>Sourdough loaf</p>
<p>Cinnamon bun</p>Close cousins of this mix-up
The tutor watches for these in the same lesson.
“The fix is to make the paragraphs smaller with styling.”
Styling would hide the symptom. The real problem is structural: the heading never ends, so the paragraphs are inside it. Close the h1.
“The paragraph belongs inside the heading because it comes after it.”
Coming after is not the same as being inside. The heading and the paragraph are siblings: both sit directly in the body, one after the other.
Practise it with a tutor watching
Build the DOM tree
Read and build the tree of nested elements behind any web page.
Free with an account. The first two units need no account.