Do you think IIT Guwahati certified course can help you in your career?
Introduction
Void elements in HTML are self-closing tags that do not require an end tag or contain content. They are commonly used for adding images, line breaks, and metadata. Examples include <img>, <br>, <meta>, and <input>. These elements help structure web pages efficiently.
In this article, you will learn about the syntax of void elements, their purpose, and how to use them correctly in HTML.
Characteristics of Void Elements
No Closing Tag: Void elements do not need a closing tag.
Self-contained: They do not have any content between opening and closing tags.
Specific Purpose: Each void element has a unique function.
Common in Web Development: Used for structuring pages efficiently.
Let’s look at some of the most commonly used void elements in HTML.
HTML <br> Tag
The <br> tag is used to insert a line break in the text. It is useful when you need to break a sentence into a new line without starting a new paragraph.
Example
<!DOCTYPE html>
<html>
<body>
<p>This is the first line.<br>This is the second line.</p>
</body>
</html>
Output
The <br> tag ensures that the second sentence starts on a new line without adding extra spacing.
HTML <hr> Tag
The <hr> tag is used to insert a horizontal rule, usually to separate sections of content visually.
Example
<!DOCTYPE html>
<html>
<body>
<h2>Section 1</h2>
<p>Content of section 1</p>
<hr>
<h2>Section 2</h2>
<p>Content of section 2</p>
</body>
</html>
Output:
A horizontal line will appear between Section 1 and Section 2, visually separating the content.
HTML <img> Tag
The <img> tag is used to embed images in a webpage. It requires the src attribute to specify the image location.
The link will point to https://www.example.com/page1.html.
HTML <meta> Tag
The <meta> tag provides metadata about the webpage, such as character encoding and SEO descriptions.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Learn about HTML void elements">
</head>
<body>
<h2>Meta Tag Example</h2>
</body>
</html>
Output
Explanation:
charset="UTF-8" sets character encoding to UTF-8.
name="description" provides a page description for search engines.
Self-Closing Tags
Void elements are often referred to as self-closing tags. These tags are unique because they do not require a closing tag. Instead, they are complete on their own. This means you can add them to your HTML document without needing to wrap any content inside them.
Let's look at some common void elements and how they are used:
<br>
This tag is used to create a line break in your text. It helps to separate lines of text without creating a new paragraph.
<!DOCTYPE html>
<html>
<head>
<title>Void Elements Example</title>
</head>
<body>
<p>This is the first line.<br>This is the second line.</p>
</body>
</html>
Output
<hr>
This tag creates a horizontal line across the page. It is often used to separate sections of content.
<!DOCTYPE html>
<html>
<head>
<title>Void Elements Example</title>
</head>
<body>
<p>This is the first section.</p>
<hr>
<p>This is the second section.</p>
</body>
</html>
Output
<img>
This tag is used to insert images into your webpage. It requires the src attribute to specify the image source.
Void elements are HTML elements that do not have closing tags and do not contain any content. Examples include <br>, <hr>, <img>, <meta>, and <link>.
Why do void elements not need closing tags?
Void elements are self-contained and do not wrap around any content, so a closing tag is unnecessary.
Can we use a closing tag with void elements?
No, void elements do not require a closing tag, and adding one may cause unexpected behavior in some browsers.
Conclusion
Void elements in HTML play an essential role in web development. They help insert line breaks, images, metadata, and other non-textual content efficiently. Understanding how to use them correctly ensures that your web pages are structured properly.
518+ registered 
