HTML Elements

An HTML Element is the building block of every web page. Everything you see on a website text, images, links, buttons, and tables—is made up of HTML elements. In simple words, an HTML element is a complete structure that starts with an opening tag, contains content, and ends with a closing tag.

For example:

<p>This is a paragraph.</p>

Here, <p> is the opening tag,

This is a paragraph. is the content, and </p> is the closing tag. Together, they form one complete HTML element.

Every HTML element follows a specific format:

<start-tag> Content </end-tag>
  • Start Tag: Tells the browser what type of element it is (e.g., <h1>, <p>, <div>)
  • Content: The actual text or data shown on the page
  • End Tag: Same as the start tag but with a forward slash (e.g., </p>)

Some elements are empty (self-closing) — meaning they don’t need a closing tag.

Example:

<br>  <!-- line break -->
<img src="image.jpg" alt="Example">  <!-- image element -->
<hr>  <!-- horizontal line -->

Types of HTML Elements

1. Container Elements (with start and end tags)

These contain both opening and closing tags, and hold content inside them.

Example:

<p>This is a paragraph.</p>
<h1>This is a heading.</h1>

2. Empty Elements (self-closing)

These do not have any content or closing tag.

Example:

<br> <hr> <img> <input>

Nesting of HTML Elements

HTML elements can be placed inside one another, which is called nesting.

Example:

<p>This is a <b>bold</b> word inside a paragraph.</p>

Here, the <b> element is nested inside the <p> element.

Always remember: nested elements must be properly closed in order.

Example – Basic HTML Page with Elements

<!DOCTYPE html>
<html>
<head>
  <title>HTML Elements Example</title>
</head>
<body>
  <h1>Welcome to HTML Elements Tutorial</h1>
  <p>This page explains what HTML elements are and how they work.</p>
  <hr>
  <img src="example.jpg" alt="Example Image">
  <p>Learn more about <a href="#">HTML Tags and Attributes</a>.</p>
</body>
</html>

In this example, you can see many HTML elements like <h1>, <p>, <hr>, <img> and <a> working together to form a simple webpage.

Leave a Comment