Understanding HTML Tags and Elements
Building Blocks of Every Webpage
When you open a website, what you actually see is not code. it’s the result of code.
HTML is the very first layer that makes this possible. Before colors, layouts, animations, or frameworks, there is HTML quietly doing one job really well: describing structure.
Think of HTML as the skeleton of a webpage. Not how it looks. Not how it behaves. Just what exists.
What HTML Is (and Why We Use It)
HTML stands for HyperText Markup Language.
Despite the fancy name, HTML is not a programming language. It doesn’t make decisions. It doesn’t run logic. HTML simply answers questions like:
What is a heading?
What is a paragraph?
What is a button?
What text belongs together?
Browsers read HTML to understand structure and meaning, not style.
What Is an HTML Tag?
An HTML tag is a marker. It tells the browser:
“Hey, this thing is a paragraph”
or
“This thing is a heading”
Example:
<p>Hello World</p>
Here, p is the tag name. Tags usually come in pairs:
Opening tag: <p>
Closing tag: </p>
Everything inside belongs to that tag.
Opening Tag, Closing Tag, and Content
Let’s break the same example down:
<p>Hello World</p>
<p> → opening tag
Hello World → content
</p> → closing tag
Together, they form a complete unit. This unit is what we call an HTML element.
Tag vs Element (This Confuses Everyone at First)
This is important.
Tag → just the marker (<p>)
Element → opening tag + content + closing tag
So:
<h1>Welcome</h1>
<h1>is a tag
<h1>Wekcome</h1> is an element
If you remember only one thing: Elements are made using tags.
Self-Closing (Void) Elements
Some elements don’t wrap content. They exist on their own.
Examples:
<img />
<br />
<input />
These are called self-closing or void elements. Why?
Because there’s nothing to close, no inner content. An image doesn’t wrap text. A line break doesn’t contain anything.
Block-Level vs Inline Elements
HTML elements fall into two broad behavior types.
Block-Level Elements
Start on a new line
Take full width by default
Examples:
<h1>
<p>
<div>
They stack vertically.
Inline Elements
Stay within the line
Take only required width
Examples:
<span>
<a>
<strong>
They flow like words in a sentence. This difference matters a lot later when CSS enters the picture.
Commonly Used HTML Tags
You don’t need to memorize everything. Start with the basics:
<h1>Heading</h1>
<p>Paragraph</p>
<div>Generic container</div>
<span>Inline container</span>
<a href="#">Link</a>
<img src="image.png" />
Most real webpages are built using a small set of tags used well.
Inspecting HTML in the Browser (Highly Recommended)
Right-click on any webpage → Inspect. You’ll see:
HTML structure
Nested elements
How tags form a tree
This is one of the fastest ways to learn HTML by reading what browsers read.
