Anatomy of an HTML Element
An HTML element is the whole package: opening tag + inner content + closing tag. Think of tags like bread slices in a sandwich—if you forget the bottom slice, your sandwich falls apart.
"HTML elements are like Russian nesting dolls. You can put an emphasis tag <em> inside a paragraph <p>, but you must close the inner doll before closing the outer doll!"
Deep Dive: How It Works
Opening tag: Tells the browser where the element starts, e.g., <p>.
Content: The text, image, or other HTML elements sitting inside the tags.
Closing tag: Tells the browser where the effect stops with a slash, e.g., </p>.
Nesting Rule: First opened, last closed. If you write <p><strong>Hello</strong></p>, the <strong> tag opened second, so it must close first.
Syntax Blueprint
<p>This is <strong>nested</strong> text.</p>
The inner <strong> tag closes before the outer <p> tag closes.
Core Rules to Remember
Common Beginner Traps & How to Fix Them
Overlapping nested tagsWhy it happens: Writing <p><b>Oops!</p></b> breaks standard document flow.
How to fix: Ensure inner tags are closed before outer tags: <p><b>Fixed!</b></p>.
Live Interactive Example
Hit Run Code to see it liveYour Turn: Micro Challenge
No pressure! Edit the starter code below and test your solution with instant feedback.
Nest a bold tag inside a paragraph
- Write a <p> tag with the text: "HTML is <strong>awesome</strong>."
Finished reading and practicing?
Mark this lesson as completed to update your course progress.