So we will start with basics what is HTML?
When you open any website in your browser maybe YouTube, maybe LinkedIn, maybe your own project what you see (text, buttons, images, links) is built on top of HTML.
Without HTML, a webpage would be just raw text thrown randomly on the screen. No structure. No meaning. Just chaos.
And if you're learning web development (like seriously learning it, not just watching tutorials), understanding HTML properly is the first real step.
So let’s break it down in a simple way. No over-complicated words. No confusion.
What Is HTML and Why Do We Use It?
The Basic Idea
HTML stands for HyperText Markup Language.
Now that sounds fancy. But actually it’s very simple.
Markup = you mark parts of your content
(“This is a heading.” “This is a paragraph.” “This is a link.”)Language = a set of rules the browser understands.
So HTML is just a way of marking up content so the browser knows how to display it.
You're not just typing text.
You're describing what that text is.
HTML Is the Skeleton of a Webpage
Think of a webpage like a human body:
- HTML = Skeleton (structure)
- CSS = Skin & clothes (design, colors, layout)
- JavaScript = Muscles & nerves (movement and behavior)
If there is no skeleton, nothing else can exist properly.
You can’t style something that doesn’t have structure.
You can’t add behavior to something that doesn’t exist.
So HTML is the foundation.
It tells the browser:
- This is a heading.
- This is a paragraph.
- This is a list.
- This is an image.
Everything starts here.
Why Do We Use HTML?
We use HTML because:
- Browsers understand it. Every website is built from HTML (or something that generates HTML).
- It gives structure. It organizes content clearly.
- It improves accessibility. Screen readers rely on proper HTML structure.
- It’s the web standard. The internet is built on HTML.
When you write HTML, you’re not just writing code.
You’re defining the structure of a document that millions of devices can understand.
What Is an HTML Tag?
Tags Are Like Labels
An HTML tag is a label you put around content.
It tells the browser what that content is.
Think of it like this:
Opening tag → “Start of paragraph.”
Content → The actual text.
Closing tag → “End of paragraph.”
Example:
<p>This is a paragraph.</p>
Breakdown:
-
<p>= opening tag -
This is a paragraph.= content -
</p>= closing tag
The / means “closing.”
Visual Diagram: Tag Structure
Opening Tag Content Closing Tag
<p> This is a paragraph. </p>
└──────── Entire Element ────────┘
The opening tag + content + closing tag together form something called an element.
And this is where many beginners get confused.
Tag vs Element (Important Difference)
Many beginners think tag and element are same. But they are not exactly same.
-
Tag = the syntax like
<p>or</p> -
Element = the whole thing →
<p>Hello</p>
Think of it like a box:
Tags = the box edges
Content = what’s inside
Element = the full box with everything
Diagram:
ELEMENT (Whole thing)
┌───────────────────────────────┐
│ <p> Hello world </p> │
│ ↑ ↑ ↑ │
│ Opening Content Closing │
│ Tag Tag │
└───────────────────────────────┘
The browser thinks in elements.
We write tags to create them.
Self-Closing (Void) Elements
Now here’s something interesting.
Not all elements have content inside them.
Some elements don’t wrap text. They just do one thing.
For example:
- Line break
- Image
- Horizontal line
These are called void elements (sometimes casually called self-closing).
Examples:
<br>
<img src="photo.jpg" alt="A photo">
<hr>
Notice something?
There is no closing tag like </br> or </img>.
Because they don’t wrap content.
They just exist.
Common void elements:
| Tag | Purpose |
|---|---|
<br> |
Line break |
<hr> |
Horizontal line |
<img> |
Image |
<input> |
Form input |
<meta> |
Page metadata |
So remember:
Void element = one tag, no content, no closing tag.
Block-Level vs Inline Elements
This part is very important for layout understanding.
HTML elements behave in two main ways:
- Block level
- Inline
Block-Level Elements
Block elements:
- Start on a new line
- Take full width available
- Stack vertically
Examples:
<p><div>-
<h1>to<h6> <section><ul><li>
Diagram:
Block 1 ─────────────────────────
Block 2 ─────────────────────────
Block 3 ─────────────────────────
Each block sits below the previous one.
Like stacking boxes.
Inline Elements
Inline elements:
- Do NOT start on new line
- Take only as much width as needed
- Sit inside text
Examples:
<span><a><strong><em>
Example sentence:
This is a <span>word</span> and <a href="#">a link</a>.
They stay in the same line.
Diagram:
Text Text Inline1 Inline2 Inline3 Text
They flow like normal words.
Common Mistake
You should not put a block element inside an inline element.
Wrong:
<a href="#"><p>Don't do this</p></a>
Correct:
<p>Read <a href="#">this link</a>.</p>
Blocks are for structure.
Inlines are for parts inside structure.
Commonly Used HTML Tags
Let’s see the most important ones you’ll use daily.
Headings & Text
<h1>Main Title</h1>
<h2>Sub Title</h2>
<p>This is a paragraph.</p>
<h1> is biggest heading.
<h6> is smallest.
Containers
<div>This is a block container</div>
<span>This is inline container</span>
-
<div>→ block container -
<span>→ inline container
They don’t add meaning. They just help structure or styling.
Links & Images
<a href="https://example.com">Visit site</a>
<img src="photo.jpg" alt="Description">
href and src are called attributes.
Attributes give extra information.
Lists
Unordered list:
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
Ordered list:
<ol>
<li>Step one</li>
<li>Step two</li>
</ol>
Emphasis & Meaning
<strong>Important</strong>
<em>Emphasized text</em>
Use <strong> when something is important.
Use <em> for emphasis.
It’s not just styling, it adds meaning.
Minimal HTML Page Structure
Every HTML page usually looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is my first page.</p>
</body>
</html>
Breakdown:
-
<!DOCTYPE html>→ tells browser this is HTML5 -
<html>→ root element -
<head>→ metadata (not visible) -
<body>→ visible content
You don’t have to memorize everything today.
Start small.
<p><h1><div><span><a><img>
Then slowly expand.
Inspect HTML in the Browser (Very Powerful Trick)
Here’s something I wish I understood earlier.
Every website is just HTML underneath.
Right click → Inspect
You will see:
- Opening and closing tags
- Nested elements
- Structure
- Parent-child relationships
Hover over elements in inspector and browser highlights them.
This is how you really understand how websites are built.
Just reading theory is not enough. You need to observe real websites.
Final Thoughts
Many people rush it.
They jump to React. Or animations. Or fancy frameworks.
But if your HTML foundation is weak, everything else feels confusing later.
HTML is simple. But simple doesn’t mean unimportant.
It’s the base of everything on the web.
Take your time.
Write small pages.
Inspect websites.
Break things.
Fix them.
And slowly, things start making sense.
Happy coding guyzzz 🙂
Top comments (0)