Understanding HTML Tags and Elements
HTML Tags & Elements
The Skeleton of the Web
HTML (HyperText Markup Language) is the skeleton of a webpage. It provides structure and meaning to content, telling the browser what is a heading, paragraph, image, or button.
Imagine a Human Body:
HTML = Bones → provides structure. Without it, your webpage would have no shape.
CSS = Skin & Clothes → makes the page look nice and styled.
JavaScript = Brain & Muscles → makes the page interactive, allowing it to move and respond.
Every website you visit — like Twitter, YouTube, or Google — uses HTML to define its structure. It tells the browser:
“This is a heading.”
“This is a paragraph.”
“This is a button.”
What HTML is and why we use it ?
HTML (Hypertext Markup Language) is the standard language used to structure content on the web. It tells the browser what each part of the page is like headings, paragraphs, links, or images so it can display them correctly to users.
- HTML = Bones → gives structure
Why we use HTML:
TML is important because it gives structure to a webpage. Without it:
A webpage would be just plain text with no organization.
The browser wouldn’t know what is a heading, paragraph, image, or button.
To structure content on a webpage (headings, paragraphs, lists, images, links).
To tell the browser how to display information.
To create a foundation that CSS and JavaScript can build upon for styling and interactivity.
We use HTML because, without it, a browser would have no idea how to organize or show the things you want on your page like text, images, and links.
What is an HTML tag ?
An HTML tag is a specific keyword or instruction inside angle brackets (< and >) used to define the structure and content of a web page.
HTML tags are read by web browsers, not by users. They instruct the browser on how to display different types of content like text, images, links, and sections of a webpage.
HTML tags act as labels that distinguish regular text from HTML instructions and guide the browser on how the content should look.
The opening tag tells the browser where the element starts.
The content is the text or information inside.
The closing tag tells the browser where the element ends.
<h1>→ A main heading<p>→ Paragraph text<div>→ A container that groups content<span>→ Highlights or styles small text<img>→ Displays an image (self-closing tag)<br>→ Moves text to a new line (self-closing tag)
Example:
Here, <p> starts the paragraph, This is a paragraph. is the content, and </p> ends the paragraph.
<p>This is a paragraph.</p>
Some tags do not need a closing tag because they don’t contain content. These are called self-closing or void tags, such as <img>, <br>, and <hr>.
Opening tag, closing tag, and content ?
<p>→ Opening tagThis is a paragraph.→ Content</p>→ Closing tag
Opening Tag
The opening tag marks the beginning of an HTML element. It tells the browser what type of content is starting.
<p>This is a paragraph.</p>
Example:
<p>
Content
The content is the actual information placed inside the element. It can be text, images, or even other HTML elements.
Example:
This is a paragraph.
Closing Tag
The closing tag marks the end of an HTML element. It looks like the opening tag but includes a forward slash / before the tag name.
Example:
</p>
What an HTML element means ?
An HTML element is the complete building block of a webpage. It tells the browser what the content is and how it should be displayed.
HTML Element = Opening Tag + Content + Closing Tag
Example :
<p>→ Opening tag (tells the browser: start a paragraph)Hello chai aur code→ Content (the text inside the element)</p>→ Closing tag (tells the browser: end the paragraph)
<p>Hello chai aur code</p>
Tag vs Element (this is where most beginners get confused) ?
In Simple Words:
Tag = Just the markup (
<p>or</p>)Element = Opening tag + content + closing tag (
<p>Hello World</p>)
<p>→ Tag (opening)
</p>→ Tag (closing)
<p>Hello World</p>→ Element (full structure with content)
What Is an HTML Tag?
A tag is a keyword written inside angle brackets < > that tells the browser what kind of content it is dealing with.
Only the markup, not the content.
Comes in opening and closing forms.
Example: <p> or </p>
Opening Tag →
<p>Closing Tag →
</p>Self-Closing Tag →
<img src="image.jpg">,<br>,<hr>
Examples of HTML tags:
<p> <!-- Opening tag for paragraph -->
</p> <!-- Closing tag for paragraph -->
<h1> <!-- Opening tag for heading -->
<img src="image.jpg">, <br>, <hr>
What Is an HTML Element?
An element is the complete structure that includes the opening tag, content, and closing tag.
Opening tag + Content + Closing tag.
Represents a complete unit of content on the page.
Example:
<p>Hello chai aur code</p>Think of it as the whole box with content inside.
<p>→ Opening tagHello World→ Content</p>→ Closing tag
Example:
<p>Hello World</p>
Self-closing (void) elements ?
Some HTML elements don’t have any content and don’t require a closing tag. These are called self-closing or void elements.
Self-closing (void) elements are HTML elements that do not have any content inside them, so they do not need a closing tag. They are complete by themselves and perform a specific task on the webpage.
No closing tag is needed.
They cannot contain content inside them.
They are still HTML elements, even though they are empty.
Simple Examples
1) Breaks the line and moves text to the next line.
<br>
2) Inserts an image on the webpage.
<img src="image.jpg" alt="Sample image">
3) Takes input from the user.
<input type="text" placeholder="Enter your name">
4) Draws a horizontal line to separate content.
<hr>
Block-level vs inline elements
i) Block-level Elements
A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.
Creates a new “block” of content
Pushes other elements below it
Often used for main sections or structure
Examples:
<p>→ Paragraph<div>→ Division or section
Common Block-Level Elements
These elements are usually used to structure and layout a webpage:
<address> <article> <aside> <blockquote> <canvas>
<dd> <div> <dl> <dt> <fieldset>
<figcaption> <figure> <footer> <form>
<h1> to <h6> <header> <hr>
<li> <main> <nav> <noscript>
<ol> <p> <pre> <section>
<table> <tfoot> <ul>
ii) Inline Elements
An inline element does not start on a new line. It only takes up as much width as necessary.
Stays in the same line as surrounding text
Only as wide as the content inside it
An inline element does not start on a new line.
An inline element only takes up as much width as necessary.
Common Inline
These elements usually appear inside text or inside block elements like <p> or <div>:
<a> <abbr> <acronym> <b> <bdo> <big> <br>
<button> <cite> <code> <dfn> <em> <i>
<img> <input> <kbd> <label> <map>
<object> <output> <q> <samp> <script>
<select> <small> <span> <strong> <sub>
<sup> <textarea> <time> <tt> <var>
Commonly used HTML tags
1. <div> – Container
Used to group elements.
<div>Content</div>
2. <h1> to <h6> – Headings
Used for titles.
<h1>Main Title</h1>
<h2>Sub Title</h2>
3. <p> – Paragraph
Used for normal text.
<p>This is a paragraph.</p>
4. <a> – Link
Used to create links.
<a href="#">Click here</a>
5. <img> – Image
Used to show images.
<img src="image.jpg" alt="Image">
6. <ul> & <li> – List
Used for bullet lists.
<ul>
<li>Item 1</li>
</ul>
7. <span> – Inline text
Used to style small text.
<span>Word</span>
8. <input> – Input Field
Used in forms.
<input type="text">
9. <button> – Button
Used for clickable buttons.
<button>Submit</button>
10. <form> – Form
Used to collect user data.
<form>...</form>
Summary
HTML (HyperText Markup Language) is the backbone of the web. It provides structure and meaning to a webpage by telling the browser what each part is, like headings, paragraphs, images, links, and buttons. HTML uses tags written inside angle brackets < > to define content. A complete HTML element consists of an opening tag, content, and a closing tag. Some elements, like <img> and <br>, are self-closing because they don’t contain content. Elements can be block-level, which start on a new line, or inline, which stay on the same line. Without HTML, a webpage would just be unorganized plain text, and CSS and JavaScript would have nothing to work with.
