Understanding HTML Tags and Elements
HTML is the skeleton of a webpage.
Just like a body needs bones to stand, a website needs HTML to exist.
HTML tells the browser:
where headings go
where text appears
where images, buttons, and links should be shown
What is HTML?
HTML stands for HyperText Markup Language.
We use HTML to structure web pages.
Without HTML, a browser would not know what is a heading, paragraph, or image.
What is an HTML Tag?
HTML tags are instructions for the browser.
Example:
<p>Hello World</p>
Here:
<p>is the opening tag</p>is the closing tag
Opening Tag, Closing Tag, and Content
<h1>Welcome</h1>
<h1>→ opening tagWelcome→ content</h1>→ closing tag
What is an HTML Element?
When opening tag + content + closing tag come together, it is called an HTML element.
Example:
<p>This is a paragraph</p>
👉 This whole line is one HTML element.
Simple rule:
Tag = instruction
Element = complete structure
Self-Closing (Void) Elements
Some HTML tags do not need a closing tag.
Examples:
<br>
<img src="image.jpg">
<input>
These are called self-closing or void elements.
Block-Level vs Inline Elements
Block-Level Elements
Start on a new line
Take full width
Examples:
<div></div>
<p></p>
<h1></h1>
Inline Elements
Stay in the same line
Take only required space
Examples:
<span></span>
<a></a>
<strong></strong>
Commonly Used HTML Tags
<h1>to<h6>→ headings<p>→ paragraph<div>→ container<span>→ inline text<a>→ link<img>→ image<button>→ button
Practice Tip
Open any website:
Right click → Inspect
Look at the HTML structure
Try to understand how tags and elements are used
