Understanding HTML Tags and Elements
What Is HTML and Why Do We Use It?
HTML stands for HyperText Markup Language.
But instead of focusing on the long name, here’s the easiest way to think about it:
🦴 HTML is the skeleton of a webpage.
Just like a human skeleton gives structure to the body, HTML gives structure to a website:
Headings
Paragraphs
Images
Buttons
Links
Without HTML, a browser wouldn’t know what content exists on a page or how it’s organized.
What Is an HTML Tag?
An HTML tag is a keyword wrapped in angle brackets (< >) that tells the browser what kind of content it’s dealing with.
<p>
This tag tells the browser:
“Hey, the content here is a paragraph.”
Opening Tag, Closing Tag, and Content
Most HTML tags come in pairs:
<p>Hello World</p>
Let’s break it down:
<p>→ Opening tagHello World→ Content</p>→ Closing tag
Think of it like a box:
Opening tag = opening the box
Content = what’s inside
Closing tag = closing the box
What’s an HTML Element?
This is where many beginners get confused.
An HTML element includes:
Opening tag
Content
Closing tag
So this entire thing is one HTML element:
<p>Hello World</p>
Key Difference
Tag →
<p>Element →
<p>Hello World</p>
You don’t write “HTML tags” on a page - you build pages using HTML elements.
Self-Closing (Void) Elements
Some elements don’t have content, so they don’t need a closing tag.
These are called self-closing or void elements.
<img>
<br>
<input>
Why?
Because there’s nothing to wrap inside them.
An image doesn’t contain text
A line break doesn’t wrap content
So one tag is enough.
Block-Level vs Inline Elements
HTML elements behave differently on the page. The two most important categories are:
Block-Level Elements
Start on a new line
Take up full width
<h1>Heading</h1><p>Paragraph</p><div>Container</div>
Think of them as big blocks stacked vertically.
Inline Elements
Stay in the same line
Take only as much space as needed
<span>Text</span><a>Link</a><strong>Bold</strong>
They behave like words inside a sentence.
Commonly Used HTML Tags (Beginner Set)
Here are some tags you’ll use all the time:
<h1> to <h6> <!-- Headings -->
<p> <!-- Paragraph -->
<div> <!-- Block container -->
<span> <!-- Inline container -->
<img> <!-- Image -->
<a> <!-- Link -->