-
Hajipur, Bihar, 844101
HTML Elements
HTML pages are built using elements. Every heading, paragraph, image, link or list you see on a webpage is an element. Understanding how elements work is one of the most important parts of learning HTML. Once you know how elements are structured and how they interact with each other, you’ll be able to build clean, organized and meaningful webpages. In this chapter, you’ll learn what HTML elements are, how they are written, how nested elements work, the difference between block and inline elements and how browsers interpret them.
What Is an HTML Element?
An HTML element is a combination of:
-
An opening tag
-
Content
-
A closing tag
Here’s a simple example:
<p>This is a paragraph.</p>
In this example:
-
<p>is the opening tag -
This is a paragraph.is the content -
</p>is the closing tag
Together, these parts form one complete element.
Some elements do not have content or a closing tag. These are called empty elements.
Example:
<br />
<img src="photo.jpg" />
<hr />
These elements stand alone but still play an important role in structuring your page.
Basic Structure of an Element
The general structure looks like this:
<tagname>content</tagname>
For example:
<h1>My Website</h1>
Every element has a purpose. For example:
-
<p>represents a paragraph -
<h1>to<h6>represent headings -
<a>represents a link -
<img>represents an image -
<ul>and<ol>represent lists
As you learn more tags, you'll see how different elements help shape the layout and meaning of a webpage.
Nested HTML Elements
Elements can be placed inside other elements. This is called nesting. It helps create structure and makes your layout more organized.
Example:
<div>
<h2>About Me</h2>
<p>I enjoy learning HTML and building simple webpages.</p>
</div>
Here, the <h2> and <p> elements are nested inside a <div> element.
A few important rules for nesting:
-
Always close inner tags before closing the outer tag.
-
Tags should be properly aligned to keep code readable.
-
Incorrect nesting can break your layout.
Incorrect example:
<p><strong>This is wrong.</p></strong>
Correct example:
<p><strong>This is correct.</strong></p>
Nested elements help webpages stay structured, especially when working with sections, containers and layouts.
Block-Level Elements
Block-level elements take up the full width available, even if their content is small. They always start on a new line.
Common block-level elements include:
-
<div> -
<p> -
<h1>to<h6> -
<ul> -
<ol> -
<table> -
<section> -
<header> -
<footer>
Example:
<h1>Welcome</h1>
<p>This is a block-level paragraph.</p>
Each element appears on a new line.
Block elements help structure the page into clear sections.
Inline Elements
Inline elements do not start on a new line. They only take up as much width as needed. These elements usually appear inside block elements.
Common inline elements include:
-
<span> -
<a> -
<img> -
<strong> -
<em> -
<label>
Example:
<p>This is a <strong>bold</strong> word inside a paragraph.</p>
The paragraph stays on one line, and the bold text appears inside it without breaking the flow.
Block vs Inline Example
Here’s a simple layout showing the difference:
<div>Block element</div>
<div>Another block element</div>
<p>This is a paragraph with an <a href="#">inline link</a> inside it.</p>
Block elements appear in separate rows. Inline elements stay inside the same line as long as there is space.
Understanding this difference is very useful when you start designing layouts with CSS.
HTML Element Tree
Your browser reads an HTML document like a tree. Each element becomes a node inside this tree. Elements inside other elements become child nodes.
For example:
<div>
<h2>Heading</h2>
<p>Text here</p>
</div>
This structure looks like:
-
div
-
h2
-
p
-
This tree structure helps the browser understand how your webpage should look and how elements relate to each other.
Empty HTML Elements
Some elements don’t wrap any content. They are used for specific actions like breaking lines or inserting images.
Examples of empty elements:
-
<br />for line break -
<hr />for horizontal line -
<img />for images -
<meta />for metadata -
<link />for linking CSS files
Even though they don’t have closing tags, they are still considered complete elements.
Global Structure Example
Here’s a simple page showing different types of elements working together:
<!DOCTYPE html>
<html>
<head>
<title>Elements Example</title>
</head>
<body>
<h1>My Profile</h1>
<div>
<h2>About Me</h2>
<p>I enjoy building small web projects.</p>
</div>
<p>Here is a link to my <a href="#">portfolio</a>.</p>
<hr />
<img src="photo.jpg" alt="My photo" />
</body>
</html>
This example includes block elements, inline elements, nested elements and empty elements in a clean and structured way.
Real-Life Use of HTML Elements
You will see elements used everywhere:
-
Headings in blogs
-
Paragraphs in article text
-
Lists in menus
-
Images in galleries
-
Links in navigation
-
<div>and<section>for layout blocks -
<span>for inline styling -
<header>and<footer>for page sections
Once you understand elements well, building complex layouts becomes much easier.
Practice Task
Create a small webpage that includes:
-
A heading
-
A paragraph
-
A
<div>with a nested heading and a nested paragraph -
An inline element inside a paragraph
-
A list with three items
-
An image
-
A horizontal line
This exercise will help you understand how elements combine to form a complete page.
Summary of HTML Elements
HTML elements are the basic building units of every webpage. You learned what elements are, how tags work, how elements nest inside each other and the difference between block and inline elements. These concepts form the backbone of your HTML knowledge and prepare you for understanding attributes, which add more meaning and control to each element.
Practice Questions
Q1. Create a paragraph element using <p> with any text.
Q2. Write a heading using <h2> with the text "My Page".
Q3. Create a nested element with <strong> inside a <p>.
Q4. Insert a horizontal line using the <hr> tag.
Q5. Add a line break using the <br> tag between two sentences.
Q6. Create an anchor tag <a> with link text "Click here".
Q7. Add an image element <img> with a sample src and alt.
Q8. Identify 2 block elements and add them to an HTML file.
Q9. Write an inline element example using the <span> tag.
Q10. Create a full HTML page with at least 5 different elements.
