Understanding HTML Tags and Elements
When you open any website, what you are really seeing is a structured document that the browser understands and displays. The language responsible for creating this structure is HTML HyperText Markup Language.
HTML is not about colors, animations, or logic. Its main job is to define the structure and meaning of content. Because of this, HTML is often called the skeleton of a webpage. Just like a skeleton gives shape and support to a body, HTML gives shape and organization to web content. Without HTML, a browser would only see plain text with no structure.
What HTML Is and Why We Use It
HTML is a markup language, not a programming language. It does not perform calculations or make decisions. Instead, it describes what content is and how it is structured.
We use HTML because:
Browsers understand it natively
It gives meaning to content (headings, paragraphs, links)
It works on all devices and browsers
It supports accessibility and search engines
In modern web development:
HTML defines structure
CSS controls appearance
JavaScript controls behavior
This separation keeps websites clean and maintainable.
What an HTML Tag Is
An HTML tag is a keyword written inside angle brackets < >.
Tags act as labels or instructions for the browser.
You can think of tags like boxes or punctuation in a sentence:
They tell the browser where something starts
They tell the browser where it ends
They describe what kind of content is inside
Example:
<p>Hello World</p>
Here, <p> tells the browser this content is a paragraph.
Opening Tag, Closing Tag, and Content
Most HTML tags come in pairs:
Opening tag – starts the element
Example:<p>Content – the text or elements inside
Example:Hello WorldClosing tag – ends the element
Example:</p>
Complete example:
<p>Hello World</p>
The slash / in the closing tag is important. It tells the browser that the instruction has ended.
What an HTML Element Means
This is an important distinction.
A tag is just the markup:
<p>or</p>An element includes:
Opening tag
Content
Closing tag
So this:
<p>Hello World</p>
Is called a paragraph element, not just a tag.
In simple terms:
Tags are the syntax
Elements are the actual building blocks of the webpage
Self-Closing (Void) Elements
Some HTML elements do not have content inside them. These are called self-closing or void elements.
They:
Do not wrap text
Do not have a closing tag
Examples:
<img src="image.png" alt="Sample image">
<br>
<input type="text">
These elements perform a single task, like inserting an image or a line break.
Important:<img></img> is invalid<img> is correct
Block-Level vs Inline Elements
HTML elements behave differently when displayed on a page.
Block-Level Elements
Block elements:
Start on a new line
Take full width of their parent
Stack vertically
Examples:
<h1>Title</h1>
<p>This is a paragraph</p>
<div>A section</div>
Block elements are used to create the main layout and structure.
Inline Elements
Inline elements:
Stay on the same line
Take only the space they need
Flow with text
Examples:
<span>highlight</span>
<a href="#">link</a>
<strong>bold</strong>
Inline elements are used inside text, not for page layout.
Simple Comparison
| Feature | Block | Inline |
| New line | Yes | No |
| Width | Full | Content only |
| Layout use | Structure | Text formatting |
Commonly Used HTML Tags
Here are the most important tags beginners should know:
Text and Structure
<h1>– Main heading<p>– Paragraph<div>– Generic block container<span>– Generic inline container
Text Emphasis
<strong>– Important text<em>– Emphasized text
Links and Media
<a>– Link<img>– Image
These tags are enough to build simple, meaningful webpages.
Inspecting HTML in the Browser
A great way to learn HTML is by inspecting real websites.
Every modern browser lets you:
Right-click → Inspect
See the HTML structure
Edit elements live
Understand how layout works
When you hover over elements in the inspector, the browser highlights their boxes on the page. This makes it easier to understand block and inline behavior visually.