Understanding HTML Tags and Elements
This is a basic requirement for the people who wants to learn the Web Development, this is the first technology people learn when they step into the world of Web Devlopment.
Sometimes it feel wonders that how text, images, buttons appear on a webpage, the answer starts with HTML tags and Elements.
This article will guide you through these Tags and Elements step by step, using clear explanations, simple examples and visual ideas, there is no advance knowledge required to understand this article.
What is HTML and Why We Use It
HTML stands for Hypertext Markup Language, it is used to build the structure of any website. It tells the browser that what content will exist on a page and how that will structured.
Let’s suppose a webpage is like a human body. Just like human body is made of skeleton, then skin and clothing is there to make it look good after that muscles and brain which keep functioning to make our body interactive.
Just like that a website is also made of several components, we can compare them with a human body in following manners :
HTML is the skeleton of webpage
CSS is the styling ( like skin and clothing ) to make the webpage look good
Javascript give the interactivity to webpage, just like a brain and muscles.
What is an HTML tag ?
A HTML tag is used to tell the browser that the component inside this tag refers to an specific type, It is like an instruction for the browser.
HTML tag is written inside <> brackets.
Example : <p>Paragraph</p>
Opening and Closing Tags :
Most of the tags comes in pair of opening and closing tag. It can be written like <> </>. CLosing tag is same as the opening tag, but with a forward slash /.
What is Content ?
Anything comes between these opening and closing tags, is known as content. This can be written like this <>Content</>
Example : <p>Hello World</p>
Self-Closing (Void) Elements
Some HTML elements don’t need content. These are called self-closing or void elements.
Examples include:
Images
Line breaks
Horizontal lines
Example:
<img src="photo.jpg">
There is:
❌ No closing tag
❌ No content inside
The browser already knows what to do just by seeing the tag.
Block-Level vs Inline Elements
HTML elements behave differently when displayed on a page. The two main categories are block-level and inline elements.
Block-Level Elements
Start on a new line
Take up the full width of the page
Examples:
<h1>– heading<p>– paragraph<div>– container
Inline Elements
Stay within the same line
Take up only as much space as needed
Examples:
<span>– small text container<a>– link<strong>– bold text
Commonly Used HTML Tags (Beginner-Friendly)
Here are some simple and commonly used HTML tags you’ll see everywhere:
| Tag | Purpose |
<h1> | Main heading |
<p> | Paragraph |
<div> | Group or container |
<span> | Inline container |
<a> | Link |
<img> | Image |
Simple Example
<h1>My First Webpage</h1>
<p>This is a paragraph.</p>
<span>This is inline text.</span>
These tags are enough to build your first real webpage.
Encouragement: Inspect HTML in the Browser
One of the best ways to learn HTML is to inspect real websites.
Here’s how:
Right-click on any webpage
Click Inspect or Inspect Element
Look at the HTML code
You’ll start recognizing:
Tags
Elements
How content is structured
This turns the entire internet into your classroom.
