Understanding HTML Tags and Elements (Beginner Guide)
What is HTML and why do we use it?
HTML (HyperText Markup Language) is used to structure content on the web.
It tells the browser:
what is a heading
what is a paragraph
what is a button
what is an image
Without HTML, a webpage would just be raw, unstructured text.
Think of HTML as the skeleton of a webpage. Just like a body needs a structure to hold everything together, a webpage needs HTML to define what exists on the page.
What is an HTML Tag?
An HTML tag is a keyword wrapped in angle brackets.
Example:
<p>
Tags tell the browser how to interpret the content.
Opening Tag, Closing Tag, and Content
Most HTML tags come in pairs:
<p>This is a paragraph</p>
<p>→ Opening tag</p>→ Closing tagThis is a paragraph→ Content
Analogy:
Think of it like a box:
Opening tag = opening the box
Content = what’s inside
Closing tag = closing the box
What is an HTML Element?
An HTML element is the complete structure:
<p>This is a paragraph</p>
This entire line is an element
Important distinction:
Tag = just
<p>or</p>Element =
<p>Content</p>
Self-Closing (Void) Elements
Some elements don’t have content, so they don’t need a closing tag.
Example:
<img src="image.jpg" />
<br />
<hr />
These are called void elements.
They:
don’t wrap content
exist independently
Block vs Inline Elements
This is one of the most important layout concepts.
Block Elements
Take full width of the page
Start on a new line
Examples:
<div>Block element</div>
<p>Paragraph</p>
<h1>Heading</h1>
Think of them as big containers
Inline Elements
Take only the space they need
Stay on the same line
Examples:
<span>Inline</span>
<a href="#">Link</a>
<strong>Bold text</strong>
Think of them as text-level elements
Commonly Used HTML Tags
Here are some basic ones you’ll use often:
<h1>Main Heading</h1>
<p>Paragraph text</p>
<div>Container</div>
<span>Inline container</span>
<a href="#">Link</a>
<img src="image.jpg" />
<ul>
<li>List item</li>
</ul>
Try This (Important)
Right-click on any webpage → click Inspect
You’ll see the HTML structure behind the page.
This is one of the fastest ways to learn:
how real websites are built
how elements are structured
Final Thought
HTML is not about styling or logic. It’s about structure and meaning.
Once you understand HTML structure, you can speed up writing it using Emmet.
HTML Emmet Blog
And to style your HTML, you'll need to learn CSS selectors.
CSS Selectors
