What is replaced, non-replaced and void elements in HTML

9/14/2025

If you're preparing for a web development interview or just starting with HTML, understanding the different types of HTML elements is a must. Three terms often cause confusion: replaced elements, non-replaced elements, and void elements. Here’s a clear guide to help you grasp these concepts quickly and confidently.

What Are Non-Replaced Elements?

Non-replaced elements are your standard HTML tags. They come with an opening tag and a closing tag, enclosing the content you want to display on the web page.

They can contain text, images, or even other nested elements.
Examples include

1 <!-- <div> is a container -->
2  <div>
3    <!-- <h1> is a main heading -->
4    <h1>Welcome to My Website</h1>
5
6    <!-- <p> is a paragraph -->
7    <p>
8      This is my first website. I want to <strong>learn HTML</strong> 
9      and become better at web development.
10    </p>
11  </div>

The browser reads and renders the content inside these tags.

What Are Replaced Elements?

Replaced elements are a bit different. Instead of your usual text or nested tags, these elements get replaced by external objects or controls when the page loads.

Think of images, text inputs, videos - these elements don’t show HTML inside them; they show the external file or UI widget.
Examples are Images, form fields and videos

1<!-- <img> shows an image -->
2  <img src="https://via.placeholder.com/150" alt="Sample Image" />
3
4  <!-- <input> creates a field where user can type -->
5  <p>
6    Enter your name: 
7    <input type="text" placeholder="Your name here" />
8  </p>
9
10  <!-- <video> plays a video -->
11  <video width="320" height="240" controls>
12    <source src="sample-video.mp4" type="video/mp4" />
13    Your browser does not support the video tag.
14  </video>
15

They often come with their own default styles and can be harder to customize.

What Are Void Elements?

Void elements are self-closing tags. This means they don’t have a closing tag and cannot contain any content inside them.

They are used for inserting things like line breaks, images, or metadata into the page without wrapping any content.
Common void elements include

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <!-- <meta> gives metadata about the page -->
5  <meta charset="UTF-8">
6  <meta name="description" content="Example of HTML tags br, hr, img, input, meta">
7  <title>HTML Example</title>
8</head>
9<body>
10
11  <!-- <img> shows an image -->
12  <img src="https://via.placeholder.com/150" alt="Sample Image" />
13
14  <!-- <br> inserts a line break -->
15  <p>Hello,<br>this text is on the next line.</p>
16
17  <!-- <hr> creates a horizontal line (divider) -->
18  <hr>
19
20  <!-- <input> creates a text box -->
21  <p>
22    Enter your email: 
23    <input type="email" placeholder="example@mail.com" />
24  </p>
25
26</body>
27</html>

Sometimes, you’ll see them written with a slash at the end.

<br/>

but this is optional in HTML5.

Element Type	Closing Tag Required?	Can Contain Content?	Common Examples
Non-Replaced	Yes	Yes	<p>, <div>, <h1>
Replaced + Void	No	No	<img>, <input>, <br>
Replaced + Non-Void	Yes	Yes	<video>, <iframe>, <object>
Void + Non-Replaced	No	No	<meta>, <link>, <base>