Understanding HTML Tags and Elements
I write technical Blogs
What is HTML?
HTML stands for HyperText Markup Language.
Let’s break this name down because it actually explains everything:
HyperText
HyperText means text that can connect to other text using links.
When you click a link and move from one page to another—that’s HyperText.
Example: <a href=”www.example.com” >Go to Website</a>
Markup
Markup means marking content so the browser understands what the content is.
You’re not telling how it should look, you’re telling what it is.
Example:
<h1 >This is a heading </h1>
<p>This is a paragraph</p>
Browser understands:
This is a heading
This is a paragraph
Language
HTML is a language with rules, syntax, and structure.
Why HTML Is Mandatory
Without HTML:
No text
No images
No buttons
No forms
No website
HTML as a Real-Life Example
Think of building a house:
| House | Website |
| Bricks & structure | HTML |
| Paint & decoration | CSS |
| Electricity & automation | JavaScript |
So HTML = structure + meaning
what Are HTML Tags?
HTML works using tags.
A tag tells the browser:
“Hey browser, this content is a heading / paragraph / link / image.”
<p>This is a paragraph</p>
Types of HTML Tags
Opening Tag
Starts the element. <p>
Closing Tag
Ends the element. </p>
The HTML Document Structure (VERY IMPORTANT)
Every HTML page follows this structure:
<!DOCTYPE html>
This tells the browser:
“This document uses HTML5.”
Without this, browsers may behave inconsistently.
<html> Tag
This is the parent of all tags
Nothing exists outside this tag
Think of it as the boundary of your webpage.
<head> Tag
The <head> contains metadata (information about the page).
Inside <head>:
Page title
SEO info
CSS files
Fonts
Meta tags
Example
<body> Tag
Everything users see and interact with goes here:
Text
Images
Buttons
Forms
Links
Heading Tags (h1 to h6) Explained
HTML has 6 heading levels.Why 6 headings?
They define content hierarchy, not just size.
Example:
h1→ Page titleh2→ Section titleh3→ Sub-section
Self-Closing (Void) Tags
These tags don’t wrap content, so no closing tag is needed.
<br> – Line Break
<hr> – Horizontal Rule
Block-Level Elements Explained
Block elements:
Take full width
Start on a new line
Examples:
Inline Elements Explained
Inline elements:
Take only required space
Stay on the same line
Examples:
span vs div
| div | span |
| Block-level | Inline |
| Structure/layout | Small text styling |
| Takes full width | Takes needed width |