HTML Tags and Elements
The Foundation of Webpage Structure
SEƦVING THƦOUGH CODE || EVEƦY LINE AN OFFEƦING
What is HTML and Why Do We Use It?
HTML stands for HyperText Markup Language.
It is used to build and organize content on websites.
HTML is not a programming language because it does not perform logic or calculations.
HTML’s main job is to describe content to the browser.
HTML tells the browser:
What type of content is present (heading, text, image, link, form, etc.)
How the content should be arranged on the webpage
Simple Example
<h1>Hello World</h1>
<p>This is a paragraph.</p>
<a href="https://example.com">Click here</a>
Why is HTML Important?
HTML is essential because a website cannot exist without it.
HTML is used to:
Structure web pages
Communicate content meaning to browsers
Create links between web pages
Act as the base for CSS and JavaScript
What is an HTML Tag?
An HTML tag is a special keyword written inside angle brackets < >.
Example:
<p>Hello</p>
Here:
<p>→ opening tag</p>→ closing tag
Tags inform the browser what kind of content they contain.
Opening Tag, Content, and Closing Tag
Most HTML tags come in pairs.
Example:
<h1>My Blog</h1>
Explanation:
<h1>→ opening tagMy Blog→ content</h1>→ closing tag
Think of tags like book covers and the content as the story inside.
What is an HTML Element?
An HTML element is made up of:
Opening tag
Content
Closing tag
Example:
<p>This is a paragraph.</p>
The entire line is called one HTML element.
Self-Closing (Void) Elements
Some HTML elements do not contain content, so they don’t need a closing tag.
These elements:
Perform a single action
Close themselves automatically
Examples:
<img>
<br>
<hr>
<input>
Block-Level vs Inline Elements
This determines how elements behave on the page.
Block-Level Elements
Always start on a new line
Take full width of their container
Common block elements:
<div>
<p>
<h1>
Example:
<h1>Heading One</h1>
<h1>Heading Two</h1>
Inline Elements
Stay on the same line
Take only as much space as needed
Common inline elements:
<span>
<a>
<strong>
Example:
This is <span>inline</span> text.
Commonly Used HTML Tags
| Tag | Purpose |
|---|---|
<h1> |
Heading |
<p> |
Paragraph |
<div> |
Block container |
<span> |
Inline container |
<a> |
Link |
<img> |
Image |
<br> |
Line break |
Conclusion
HTML is the core building block of the web.
It structures content and helps browsers understand what each part of a webpage represents.
When HTML is written properly, it becomes much easier to:
Style pages using CSS
Add behavior and interaction using JavaScript
HTML is always the first step in web development 🚀
Want More…?
I post Blogs and related content on the following platforms:
