Elements0%

Elements

Beginner7 min read•Updated: 2026-09-09

HTML Elements (The Building Blocks)

Welcome to Topic 1.4! 🧱

In the previous lessons, you got introduced to HTML and set up VS Code on your computer. Now it is time to understand the most important concept in all of web development: HTML Elements.

Every webpage you see on the internet—every headline, paragraph, picture, button, and link—is an HTML Element. If a webpage is a brick building, HTML elements are the individual bricks used to build it.

What is an HTML Element?

An HTML Element is everything from the starting tag to the ending tag, including the content inside it.

Let us use a simple real-life example: A Sandwich! 🥪

Visual Architecture & Process Flow

How data and code flow step-by-step

Flowchart

Step 1

[ Top Bread Slice ]

Step 2

Opening Tag: <p>

The Three Parts of an HTML Element:

1
Opening Tag (Start Tag): Tells the browser where the element begins (e.g., <p>).
2
Content: The actual text, image, or message displayed on your screen (e.g., I love web development!).
3
Closing Tag (End Tag): Tells the browser where the element ends. It always includes a forward slash / (e.g., </p>).

HTML

1<p>This entire line is an HTML element.</p>

Tag vs. Element (Never Get Confused!)

Many students use the words "Tag" and "Element" as if they mean the exact same thing. But there is a clear difference:

Term	What It Means	Example
Tag	Just the label inside the angle brackets `< >`	`<p>` (opening tag) or `</p>` (closing tag)
Element	The complete combination of start tag + content + end tag	`<p>Hello Students</p>`

Types of HTML Elements

HTML has two main types of elements:

1. Normal Container Elements (Paired Elements)

These elements contain text or other tags inside them. They must have both an opening tag and a closing tag:

HTML

1<h1>Main Title of My Page</h1>
2<p>This is a normal paragraph element.</p>
3<button>Click Here</button>

2. Empty Elements (Void / Self-Closing Elements)

Some elements do not contain any text inside them. Because they have no content, they do not need a closing tag!

Here are the most common empty elements you will use:

Tag	Full Name	What It Does	Example
`<br>`	Break	Moves text to the next line (like pressing Enter)	`<p>Line 1<br>Line 2</p>`
`<hr>`	Horizontal Rule	Draws a straight horizontal divider line across the page	`<hr>`
`<img>`	Image	Embeds a picture on the page	`<img src="photo.jpg" alt="Nature">`
`<input>`	Input Field	Creates a box for typing text or passwords	`<input type="text">`

Note

Good Practice Tip: In modern HTML5, you can write <br> or <br />. Both work identically in all browsers, but simple <br> is standard and easier to write.

Nested Elements (Elements Inside Elements)

In HTML, you can place elements inside other elements. This is called Nesting.

Think of nesting like your School Bag:

Your School Bag is the big outer container (<body>).
Inside your school bag is your Pencil Box (<p>).
Inside your pencil box is a Sharpener (<b>).

Example of Nested Code:

HTML

1<p>Welcome to <b>MSK Institute</b> in Shikohabad.</p>

In this example:

The <p> element wraps the entire sentence.
The <b> element is nested inside <p> to make the words "MSK Institute" appear bold.

Output

1Visualizing Nesting:
2┌────────────────────────────────────────────────────────┐
3│ <p> Welcome to <b>MSK Institute</b> in Shikohabad. </p>│
4│                └───────┬──────┘                        │
5│                  Nested Child                          │
6└────────────────────────┼───────────────────────────────┘
7                    Parent Element

The Golden Rule of Nesting (First In, Last Out)

Tags must always be closed in the reverse order of how they were opened. The tag that opens last must close first!

Correct Nesting:

HTML

1  <p>Learning HTML is <i><b>super easy</b></i>!</p>

(Here <b> opened last, so </b> closed first. Then </i>, and finally </p>.)

Wrong Nesting (Overlapping Tags):

HTML

1  <p>Learning HTML is <i><b>super easy</i></b>!</p>

(Here <b> opened inside <i>, but <i> was closed before <b>. This confuses browsers!)

Case Sensitivity: Small Letters vs Capital Letters

HTML is case-insensitive, meaning <P>, <p>, and <P> all work in browsers.

However, international web standards (W3C) strongly recommend writing all HTML tags in lowercase (small letters):

Standard: <p>, <h1>, <div>
Avoid: <P>, <H1>, <DIV>

Writing in lowercase makes your code clean, professional, and easy to read.

Common Beginner Mistakes with Elements

1
⚠️ Forgetting to Close a Container Tag:

HTML

 <!-- WRONG: The entire page below might become bold! -->
 <p>This is <b>important text.</p>
3 
 <!-- CORRECT -->
 <p>This is <b>important</b> text.</p>

1
⚠️ Trying to Close an Empty Element:

HTML

 <!-- WRONG: <br> does not have a closing tag! -->
 <br></br>
3 
 <!-- CORRECT -->
 <br>

1
⚠️ Incorrect Nesting Order:

Always remember: The inner tag must close before the outer tag closes.

Quick Summary

An HTML Element consists of an Opening Tag, Content, and a Closing Tag.
A Tag is just <p> or </p>, while an Element is the complete bundle.
Normal Elements have closing tags (e.g., <h1>...</h1>, <p>...</p>).
Empty Elements (Void Tags) do not have closing tags (e.g., <br>, <hr>, <img>).
Nesting means placing one element inside another.
Always close tags in the reverse order of how they opened (First in, Last out).
Always write tag names in lowercase.

Practice Quiz

Test your understanding with these multiple-choice questions:

1. Which of the following is an empty (void) element that does NOT require a closing tag?

A. <p> B. <br> C. <h1> D. <button> Answer: B Explanation: <br> is an empty element used to create a line break. It has no content and does not require a closing tag.

2. What is the correct way to nest bold text inside a paragraph?

A. <p>Hello <b>World</p></b> B. <b><p>Hello World</b></p> C. <p>Hello <b>World</b></p> D. <p><b>Hello World</p> Answer: C Explanation: Tags must be closed in reverse order. Since <b> opens after <p>, it must close before </p>.

3. What is the difference between an HTML tag and an HTML element?

A. A tag is for images, and an element is for text B. A tag is only the bracketed keyword (<p>), while an element includes the tags and content C. Tags are written in lowercase, and elements must be written in uppercase D. There is no difference at all Answer: B Explanation: A tag refers specifically to <tagname> or </tagname>. An element is the entire structure from opening tag to closing tag including the content inside.

4. Which of the following is another example of a void / empty HTML element?

A. <div> B. <hr> C. <span> D. <h2> Answer: B Explanation: <hr> creates a horizontal line divider across the page. It is a void element with no content or closing tag.

5. Why should all HTML tag names be written in lowercase according to W3C standards?

A. Uppercase tags cause computers to overheat B. Lowercase tags are the modern web standard, cleaner to read, and strictly required by XHTML C. Browsers refuse to open uppercase tags D. Uppercase tags delete your CSS styles Answer: B Explanation: While HTML is technically case-insensitive, writing tags in lowercase (e.g. <h1> instead of <H1>) is the universal industry best practice.

Practice Challenge (Try It Yourself)

1
Open VS Code and open your index.html file.
2
Inside <body>, create:

An <h1> heading with your school's name.
A <p> paragraph describing your favorite subject.
Use <b> inside the paragraph to make your subject bold.
Use <br> to split the sentence into two separate lines.
Add an <hr> horizontal divider line below it.

1
Save your file (Ctrl + S) and check your live page in the browser! 🚀

Next Lesson

Attributes

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
VS-Code Setup	Attributes

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

PrevNext