HTML Elements
-
This lesson explains what HTML elements are, how they work, and how different elements are used to build and structure web pages.
🧠 What Are HTML Elements ?
🧱 The Actual Pieces That Build a Webpage
In HTML, elements are the real building blocks of a webpage.
📌 Just writing tags is not enough
✅ An element is a complete unit made of tags + content🔹HTML Element
👉 An HTML element consists of:
✅ Opening Tag
✅ Content
✅ Closing Tag
Basic HTML Paragraph
This code displays the text "Hello World" using an HTML paragraph tag.
<p> Hello World </p>📌 Important Difference:
🔖 Tag only: <p>
🧱 Element (Tag + Content):
<p> Hello World </p>
✅ Remember:
👉 Tags are parts
👉 Elements are complete blocks
🧩 Types of HTML Elements
HTML elements are mainly of two types:
1️⃣ Normal (Container) Elements
✅ These elements:
Have opening tag
Have content
Have closing tag
Basic HTML Heading and Paragraph
This code shows a main heading using h1 and a paragraph using the p tag.
<h1> Title </h1>
<p> This is a paragraph </p>📌 Used for:
Text
Headings
Sections
Containers
2️⃣ Empty (Self-Closing) Elements
✅ These elements:
Do NOT have content
Do NOT need a closing tag
Self-Closing HTML Tags
This code uses self-closing elements like ,
, and
which do not require a closing tag in HTML.
<img>
<br>
<hr>📌 Used for:
Images
Line breaks
Horizontal lines
🌳 Nested HTML Elements
HTML elements can be placed inside other elements.
✅ This is called nesting
Basic HTML Content Structure
This code shows a heading and a paragraph inside a div to create a simple webpage section.
<div>
<h1> Welcome </h1>
<p> This is a website </p>
</div>📌 Here:
<h1> and <p> are inside <div>
<div> is the parent
<h1> and <p> are children