Understanding HTML Tags and Elements: The Building Blocks of the Web
When I first started learning web development, HTML felt like this mysterious language everyone kept talking about.
"Just learn HTML," they said. "It's easy," they said.
But honestly? I had no idea what a "tag" was or why some elements needed closing tags while others didn't. If you're in the same boat, don't worry—I'm going to walk you through everything I learned, step by step.
Let's dive in.
What is HTML, Really?
Think of a webpage like a house.
HTML (HyperText Markup Language) is the skeleton of that house—the walls, floors, and rooms that give it structure.
CSS makes it look pretty (paint, furniture, decorations).
JavaScript makes it interactive (lights that turn on, doors that open).
But without HTML? There's no house at all.
HTML tells the browser:
"This is a heading."
"This is a paragraph."
"This is an image."
"This is a button."
It's the foundation of everything you see on the web.
What is an HTML Tag?
Here's where it clicked for me.
An HTML tag is like a label you put on content to tell the browser what it is.
Let's say you have some text:
Welcome to my blog
The browser sees this and thinks, "Okay, it's just text. But what kind of text? A heading? A paragraph? A button?"
That's where tags come in.
You wrap the text in tags:
<p>Welcome to my blog</p>
Now the browser knows: "Oh, this is a paragraph!"
Breaking Down a Tag: Opening, Closing, and Content
Let's zoom in on that example:
<p>Welcome to my blog</p>
Here's what's happening:
<p>→ This is the opening tag. It says, "Hey, a paragraph starts here."Welcome to my blog→ This is the content. The actual text you want to show.</p>→ This is the closing tag. It says, "Okay, the paragraph ends here."
Notice the forward slash (/) in the closing tag? That's how the browser knows the tag is closed.
Another example:
<h1>My First Blog Post</h1>
<h1>→ Opening tag (heading level 1)My First Blog Post→ Content</h1>→ Closing tag
Pretty straightforward, right?
So What's an HTML Element?
Okay, here's something that confused me at first:
What's the difference between a tag and an element?
Simple answer:
A tag is just the
<p>or<h1>part.An element is the whole thing—opening tag, content, and closing tag.
Example:
<p>This is a paragraph.</p>
Tag:
<p>and</p>Element: The entire
<p>This is a paragraph.</p>
Think of it this way:
A tag is like a box.
An element is the box with something inside it.
Wait, Some Tags Don't Close?
Yep. This threw me off too.
Some HTML tags are self-closing (also called void elements). They don't need a closing tag because they don't wrap around content.
Examples:
<img src="photo.jpg" alt="A photo">
<br>
<hr>
<input type="text">
Why don't these close?
Because they don't contain content.
An <img> tag just points to an image file—it doesn't wrap around text or other elements.
A <br> tag just creates a line break. There's nothing to "close."
Pro tip: In older HTML, you might see self-closing tags written like this:
<img src="photo.jpg" />
The / at the end was a thing in XHTML. Modern HTML5 doesn't require it, but some developers still use it out of habit. Both work fine.
Block-Level vs Inline Elements: The Layout Game
This is where things get interesting.
HTML elements behave in two main ways:
1. Block-Level Elements
These take up the full width of their container. They start on a new line.
Think of them like full-width boxes stacked on top of each other.
Examples:
<div>I'm a block element</div>
<p>Me too!</p>
<h1>Same here!</h1>
If you use these in your HTML, each one will appear on its own line, taking up the full width.
When I saw this in action, it clicked: Block elements are like paragraphs in a document—they naturally stack vertically.
2. Inline Elements
These only take up as much space as they need. They sit next to each other on the same line.
Think of them like words in a sentence.
Examples:
<span>I'm inline</span> <a href="#">So am I</a> <strong>Me three!</strong>
These will all appear on the same line, side by side.
Real-world example:
<p>This is a <strong>bold word</strong> inside a paragraph.</p>
The <strong> tag is inline, so it doesn't break the sentence onto a new line. It just makes that word bold and keeps flowing with the rest of the text.
Quick visual:
Block: Think of stacking LEGO bricks vertically.
Inline: Think of placing beads on a string horizontally.
Commonly Used HTML Tags (The Ones I Use All the Time)
Let me show you the tags I reach for constantly:
Headings
<h1>Main Title</h1>
<h2>Subheading</h2>
<h3>Smaller Subheading</h3>
Headings go from <h1> (biggest) to <h6> (smallest).
I use <h1> for the main page title, <h2> for section headings, and <h3> for sub-sections.
Paragraphs
<p>This is a paragraph. Most of your text will live here.</p>
Links
<a href="https://example.com">Click here</a>
The href attribute tells the browser where to go when someone clicks.
Images
<img src="photo.jpg" alt="Description of photo">
The alt attribute describes the image (super important for accessibility and SEO).
Divisions and Spans
<div>I'm a container for grouping stuff</div>
<span>I'm for styling small bits of text</span>
<div> is block-level (great for layout).
<span> is inline (great for styling parts of a sentence).
Lists
Unordered (bullet points):
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
Ordered (numbered):
<ol>
<li>Step one</li>
<li>Step two</li>
</ol>
Buttons and Inputs
<button>Click me!</button>
<input type="text" placeholder="Enter your name">
These are interactive elements users can click or type into.
A Real Example: Putting It All Together
Here's a simple HTML snippet I might write:
<div>
<h1>Welcome to My Blog</h1>
<p>Hi! I'm <strong>Saurabh</strong>, a developer from India.</p>
<p>I love exploring <a href="#">new technologies</a> and sharing what I learn.</p>
<img src="profile.jpg" alt="Saurabh's profile picture">
</div>
What's happening here?
<div>groups everything together (block-level container)<h1>creates a heading<p>contains paragraphs<strong>makes "Saurabh" bold (inline)<a>creates a clickable link (inline)<img>shows an image (self-closing)
Pro Tips I Wish I Knew Earlier
1. Use Browser DevTools
Right-click on any webpage and select Inspect (or press F12).
You'll see the HTML of that page.
This is how I learned. I'd inspect websites I liked and see how they built things.
Try it right now! Inspect this blog post and see the HTML behind it.
2. Start Simple
Don't worry about memorizing every tag.
Start with:
Headings (
<h1>to<h6>)Paragraphs (
<p>)Links (
<a>)Images (
<img>)Divisions (
<div>)
You'll naturally learn more as you build projects.
3. Semantic HTML Matters
Later, you'll learn about semantic tags like <header>, <nav>, <main>, <footer>, and <article>.
These make your HTML more meaningful (and better for accessibility and SEO).
But for now, just focus on understanding tags and elements.
4. Experiment!
Create a simple .html file, open it in your browser, and play around.
Change tags. Add content. Break things. See what happens.
That's how real learning happens.
Try This Challenge
Open a text editor (like VS Code or even Notepad).
Create a file called index.html.
Write this:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>I'm learning HTML!</p>
</body>
</html>
Save it and open it in your browser.
Boom. You just created your first webpage.
Now change the text. Add more paragraphs. Add a link. Add an image.
The best way to learn is by doing.
Final Thoughts
HTML tags and elements are the foundation of everything you'll build on the web.
At first, they might feel like just a bunch of angle brackets and text. But once you understand how they work, you'll start seeing the web differently.
You'll inspect websites and think, "Oh, that's just a <div> with some <p> tags inside."
You'll build your own projects and feel that awesome moment when your code actually works.
That's the journey. And honestly? It never stops being fun.
Keep exploring. Keep building. And remember—every expert started exactly where you are right now.
Written by Saurabh Prajapati
Full-stack Software Engineer | GenAI & React Specialist
Currently building enterprise solutions at IBM India
GitHub • LinkedIn
