An HTML element is one complete building block of a page: a start tag, some content and an end tag. Pages are built by placing elements next to each other and inside each other, a bit like LEGO bricks.
Understanding elements well pays off in every later lesson. Styling with CSS, changing a page with JavaScript and fixing layout bugs all depend on knowing exactly where one element starts and ends, and which elements sit inside which.
In this lesson you'll learn the anatomy of an element, how to nest elements properly, and the handful of special elements that have no closing tag at all.
The difference between a tag and an element
People often mix these words up, so it helps to be precise:
- A tag is the label in angle brackets:
<p>is a start tag and</p>is an end tag. - An element is the whole thing:
<p>Hello</p>, meaning start tag, content and end tag together.
<p>Pancakes are better than waffles.</p>Here <p> and </p> are tags. The whole line is a paragraph element. The end tag always repeats the name of the start tag, with a forward slash in front of it.
Nesting elements inside other elements
Elements can contain other elements. The outer one is the parent and the inner one is the child.
<p>I <em>really</em> love pancakes.</p><em> is a child of <p>. The rule is simple: close the inner element before the outer one. Think of Russian dolls, where the last doll opened is the first one closed.
A page often nests many levels deep. A link can sit inside a list item, inside a list, inside a navigation bar, inside the body. Each level must open and close neatly inside the one around it.
Empty (void) elements
A few elements never have content, so they have no end tag. They're called void elements:
| Element | What it does |
|---|---|
<br> | Line break |
<hr> | Divider line |
<img> | Image |
<input> | Form field |
<meta> | Page information |
<link> | Links a file such as CSS |
You may see them written as <br /> with a slash. Both forms are valid HTML, and modern code usually leaves the slash out.
Block and inline elements
Elements behave in one of two ways on the page by default:
- Block elements such as
<h1>,<p>and<ul>start on a new line and stretch across the full width available. - Inline elements such as
<a>,<em>and<strong>sit inside a line of text and are only as wide as their content.
That's why two paragraphs stack on top of each other while two links sit side by side. You can change this behaviour later with CSS, which you'll learn in CSS Display.
Letter case and whitespace
HTML tag names aren't case-sensitive, so <P> works. Still, always use lowercase. It's the convention everyone follows and it's easier to read.
Extra spaces and line breaks inside your content collapse into a single space when the page is displayed. That's why you can indent code freely without changing how the page looks.
HTML Elements Syntax
Anatomy of an element
<tagname>content</tagname>
<voidtag>HTML Elements Summary
- A tag is the label in angle brackets. An element is the start tag, content and end tag together.
- Elements can be nested. Always close the inner element before the outer one.
- Void elements such as
<br>,<img>and<input>have no end tag. - Block elements start on a new line; inline elements flow inside text.
- Write tag names in lowercase.
HTML Elements Examples
Each example runs in the page. Edit the code and press Run to see what changes.
Nesting in action
Run this, then try breaking the nesting rule (swap </strong> and </em>) and see what the browser does.
<h1>Game Night</h1>
<p>This Friday we play <strong>Catan</strong> and <em>Ticket to Ride</em>.</p>
<p>Bring <strong>snacks <em>and</em> friends</strong>!</p>Line-by-line explanation
- Line 1A heading element containing text and an emoji.
- Line 2One paragraph with two children: a
<strong>and an<em>. - Line 3Nesting two levels deep:
<em>is inside<strong>, which is inside<p>. They close in reverse order.
Void elements in a poem
<br> forces a new line and <hr> draws a divider. Neither needs a closing tag.
<h2>Haiku of a Developer</h2>
<p>
Code compiles at last<br>
Then I refresh the browser<br>
Nothing has changed. Cache.
</p>
<hr>
<p>Anonymous, 2am</p>Line-by-line explanation
- Lines 3 to 5Each
<br>ends a line inside the same paragraph. - Line 7
<hr>draws a horizontal rule between sections.
Common HTML Elements Mistakes
Overlapping tags
<p>This is <strong>very <em>important</strong></em>.</p><p>This is <strong>very <em>important</em></strong>.</p><em> was opened last, so it must be closed first.
Adding a closing tag to a void element
<img src="dog.jpg" alt="My dog"></img>
<br></br><img src="dog.jpg" alt="My dog">
<br>Void elements can't have content, so they never get an end tag. </br> is even treated as a second line break by some browsers.
HTML Elements in Real Projects
Pages are trees
Browsers turn your nested elements into a family tree called the DOM. Later, in JavaScript DOM selecting, you'll walk this tree to find and change elements. Correct nesting now means fewer weird bugs later.
HTML Elements Exercises
Answer each one and check it instantly. If you get stuck, open the hint before the answer.
Which line is nested correctly?
<strong> closes before the outer <p>.Which of these is a void (empty) element?
<br> has no content and no end tag.Close the tags in the right order.
<p>Dinner is <strong>pizza <em>again</></></p><em> opened last so it closes first, then <strong>.The poem should have each line on its own line, but someone added closing tags to the line breaks. Fix it.
<p>
Roses are red<br></br>
Violets are blue<br></br>
HTML is fun
</p>- There are exactly two
<br>elements - The paragraph contains all three lines
<br> never have end tags. Removing </br> leaves exactly two line breaks.</br> doesn't close anything. Browsers treat it as an extra <br>.HTML Elements Quiz
4 questions to check what you learned.
What is an HTML element?
- Only the start tag
- Only the content
- A CSS file
- The start tag, the content and the end tag together
HTML tags should be written in…
- lowercase
- UPPERCASE
- Any mix, but
<P>is recommended - Title Case
How many elements are in
<p>Hi <em>there</em></p>?- 1
- 2
- 3
- 4
What happens to three spaces between two words in HTML content?
- They all show
- They become a line break
- They collapse into a single space
- The browser shows an error
HTML Elements Challenge
Nested shopping list
Create a paragraph that says "Buy milk, eggs and chocolate", where:
- "milk" and "eggs" are in
<strong> - "chocolate" is in
<em>inside a<strong>(double emphasis!) - everything is inside one
<p>
<p>Buy milk, eggs and chocolate</p>- There's one paragraph
- At least three
<strong>elements inside the paragraph - "chocolate" is in an
<em>inside a<strong>
<strong><em>chocolate</em></strong>.