HTML Elements
Understanding HTML elements and how they work
🧩 What are HTML Elements?
HTML elements are the building blocks of web pages. An element consists of a start tag, content, and an end tag. Elements tell the browser how to structure and display content.
<!-- HTML Element Structure -->
<tagname>Content goes here</tagname>
<!-- Examples -->
<h1>This is a heading</h1>
<p>This is a paragraph</p>
Output:
This is a heading
This is a paragraph
Types of HTML Elements
Container Elements
Have opening and closing tags
<p>Content</p>
<div>Content</div>Empty Elements
Self-closing, no content
<br>
<img src="image.jpg">Block Elements
Take full width, start new line
<h1>Heading</h1>
<p>Paragraph</p>Inline Elements
Flow with text, same line
<strong>Bold</strong>
<em>Italic</em>🔹 Basic HTML Elements
Here are the most commonly used HTML elements:
🔸 Headings (h1 to h6)
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Smaller Heading</h3>
<h4>Even Smaller</h4>
<h5>Very Small</h5>
<h6>Smallest</h6>Output:
Main Heading
Sub Heading
Smaller Heading
Even Smaller
Very Small
Smallest
🔹 Text Elements
Elements for displaying and formatting text:
<!-- Paragraphs -->
<p>This is a paragraph of text.</p>
<!-- Line breaks -->
<p>First line<br>Second line</p>
<!-- Horizontal rule -->
<hr>
<!-- Preformatted text -->
<pre>This text
keeps its
formatting</pre>Output:
This is a paragraph of text.
First line
Second line
This text
keeps its
formatting
🔹 Container Elements
Elements that group other elements together:
<!-- Generic container -->
<div>
<h2>Section Title</h2>
<p>Section content goes here.</p>
</div>
<!-- Inline container -->
<p>This is <span style="color: red;">red text</span> in a paragraph.</p>Output:
Section Title
Section content goes here.
This is red text in a paragraph.
🔹 Empty Elements
Elements that don't have closing tags:
<!-- Line break -->
<p>First line<br>Second line</p>
<!-- Horizontal rule -->
<hr>
<!-- Image -->
<img src="photo.jpg" alt="A photo">
<!-- Input field -->
<input type="text" placeholder="Enter text">Output:
First line
Second line
🔹 Nested Elements
Elements can contain other elements:
<div>
<h2>Article Title</h2>
<p>This paragraph contains <strong>bold text</strong> and <em>italic text</em>.</p>
<p>Here's a <a href="#">link</a> in another paragraph.</p>
</div>Output:
Article Title
This paragraph contains bold text and italic text .
Here's a link in another paragraph.