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 + contentHTML 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:
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
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 img, br, and hr 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