Understanding HTML Tags and Elements
I'm a Software engineer and recently graduated (2025) in computer engineering, I'm more into Fullstack Developement using Angular, Nodejs, Express js, Mongodb, currently getting my hands on React js and Next js. Connect me on Linkedin here: https://linkedin.com/in/amanpatel2529
If the web was a human body, HTML would be the skeleton.
CSS adds the style and colors.
JavaScript adds movement and brain.
But without HTML, there is nothing for CSS and JS to work on.
In this post we’ll walk through the absolute basics of HTML in a very simple way, inspired by how Hitesh Choudhary and Piyush Garg explain it in their HTML videos.
You’ll learn:
What HTML actually is and why we use it
What tags and elements are (and how they differ)
What opening tag, closing tag, and content mean
What self‑closing elements are
The difference between block‑level and inline elements
A small set of common tags you’ll use everywhere
What is HTML and why do we use it?
HTML (HyperText Markup Language) is the standard language browsers understand for structuring web pages.
When you open a website:
Your browser sends a request to some web server
The server replies with a response whose header often says:
Content-Type: text/htmlThat tells the browser: “This is HTML. Parse it and display a webpage.”
HTML lets us say things like:
“This is a heading”
“This is a paragraph”
“This is a link to another page”
“This is an image or a video”
We do this using tags.
What is an HTML tag?
Think of a tag as a label you put around content so the browser knows what it is.
A tag:
Starts with
<and ends with>Usually comes in pairs: opening tag and closing tag
Example:
<p>Welcome to ChaiCode</p>
Here:
<p>is the opening tag</p>is the closing tagThe text in between is the content
You can imagine this like putting your sentence inside a box labelled “p” (paragraph).
Tag vs Element (very important difference)
A lot of beginners mix these two, so let’s make it crystal clear.
A tag is just the keyword inside angle brackets, like
<p>or</p>.An element is the complete unit:
opening tag + content + closing tag
Take this:
<p>Welcome to ChaiCode</p>
Tags:
<p>and</p>Element: the full
<p>Welcome to ChaiCode</p>
Another example:
<a href="https://chaicode.com">Visit Chaicode</a>
Tags:
<a href="https://chaicode.com">and</a>Element: everything from the first
<a ...>to the last</a>
So whenever someone says:
“Change the style of that element”
they mean the whole box, not just the < and >.
Opening tag, closing tag, and content
Most HTML elements uses this pattern:
<opening-tag> content </closing-tag>
Some quick examples:
<h1>My First Heading</h1>
<p>This is a paragraph.</p>
<span>Inline text</span>
<div>A generic container</div>
You read them like normal English:
“Start a heading one, write the text, then end the heading one.”
“Start a paragraph, write the text, then end the paragraph.”
Self‑closing (void) elements
Not every tag needs content inside.
Some things on a page are just one point: a line break, an image, an input box.
These are called void elements or self‑closing elements.
They usually look like this:
<br/>
<img src="chaicode_logo.jpg" alt="Chaicode logo img">
<hr/>
<input type="text" placeholder="Your name">
Key points:
They have no closing tag like
</br>or</img>They do not wrap any inner content
The tag alone is the full element
Common self‑closing elements you’ll meet early:
<br>– line break<img>– image<input>– form input<hr>– horizontal line / divider<meta>,<link>– used in the<head>of the document
Block‑level vs Inline elements (how they sit on the page)
HTML elements fall roughly into two layout categories: block‑level and inline.
You don’t need to memorise every one, just understand the idea.
Block‑level elements
Block‑level elements:
Stretch to take the full width available
Always start on a new line
Stack vertically like big boxes
Examples:
<h1>Main heading</h1>
<p>This is a paragraph.</p>
<div>A container div</div>
Visually, each one appears on its own line:
[Main heading_______________________]
[This is a paragraph.______________]
[A container div___________________]
Inline elements
Inline elements:
Only take up as much width as their content needs
Sit inside a line of text
Do not force a new line by themselves
Examples:
<p>This is <strong>very important</strong> text.</p>
<p>Visit <a href="https://chaicode.com">ChaiCode</a> today.</p>
<span>Inline span</span>
<img src="logo.png" alt="chaicode logo">
The bold part and the link stay within the same lines, they don’t jump to new lines by default.
A simple way to remember:
Block = big building blocks stacked vertically
Inline = small pieces flowing inside text horizontally
Common HTML tags you’ll use all the time
Here’s a short list of tags that cover a huge part of everyday HTML.
If you learn just these well, you can build real pages.
Headings – <h1> to <h6>
<h1>My Portfolio</h1>
<h2>Projects</h2>
<h3>Contact</h3>
<h1>is the main page title<h2>–<h6>are sub‑headings
Paragraph – <p>
<p>Hello! I am learning HTML.</p>
Used for blocks of text.
Link – <a>
<a href="https://chaicode.com">Go to Chaicode</a>
Used to create hyperlinks.href tells the browser where to go.
Image – <img>
<img src="profile.jpg" alt="Profile photo">
Displays an image.
Always include a good alt text for accessibility.
Input – <input>
<input type="email" placeholder="Enter your email">
Used inside forms.
Different type values (text, password, checkbox, etc.) change its behaviour.
Line Break – <br>
<p>Line one<br>Line two</p>
Creates a simple line break.
Video – <video>
<video src="intro.mp4" controls></video>
Shows a video player.
The controls attribute adds play/pause buttons.
Division – <div>
<div class="card">
<h2>Card title</h2>
<p>Some description text.</p>
</div>
A generic block‑level container, extremely common in layouts.
Realistically, 15–20 tags (like these) are enough to build most basic websites.
See tags and elements in action (use Inspect)
The fastest way to understand HTML is to inspect a real website:
Open any site in your browser
Right‑click on a heading or image
Choose Inspect (or Inspect Element)
You’ll see:
The HTML structure on one side (tags and elements)
Styles on the other side (CSS)
Try to:
Find
<h1>,<p>,<a>,<img>,<div>,<span>Hover over them and watch which part of the page gets highlighted
This habit will teach you much more than just reading definitions.
HTML is not scary.
It’s just a bunch of simple labels that tell the browser: “This is a heading, this is a paragraph, this is a link.”
Once you’re comfortable with tags and elements, CSS and JavaScript will start making a lot more sense.
