Describe the void elements in HTML
Last Updated :
15 May, 2023
Most of the HTML elements are surrounded by start and end tags to specify the starting and end of the element.
There is a special group of elements that only have start tags and does not contain any content within it, these elements are called void elements. Void elements doesn't have ending tags and can only have attributes but do not contain any kind of content. These elements can have backslash before ending of start tag but that is completely optional. Example of such elements are <br>, <hr>, <img>, <input>, <link>, <base>, <meta>, <param>, <area>, <embed>, <col>, <track>, <source> etc.
Characteristics:
- Void elements do not have end tags.
- Void elements cannot have content inside it.
- Void elements have attributes.
- Void elements cannot be nested.
The following are some of the void elements.
HTML <br> tag: This tag is used to insert line breaks in text in HTML. It accepts clear attribute that indicates where to start the next line.
Example 1: In this example, we will use of the <br> tag.
HTML
<!DOCTYPE html>
<html>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<p>Hi Geeks! <br>Welcome to GeeksforGeeks</p>
</body>
</html>
Output:
HTML <hr> Tag: This tag is used to insert a horizontal rule in HTML documents to separate different document sections. It can have attributes like Align, no shade, width, size.
Example 2: In this example, we will see the use of the <hr> tag.
HTML
<!DOCTYPE html>
<html>
<body>
<p>Welcome to GeeksforGeeks</p>
<hr>
<p>A computer science portal for geeks</p>
</body>
</html>
Output:
<hr> tag
HTML <img> Tag: This tag is used to add images to HTML web pages. It can have attributes like src, alt, height, width, ismap, loading, etc.
Example 3: In this example, we will see the use of the <img> tag.
HTML
<!DOCTYPE html>
<html>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-13.png"
width="320" height="100" alt="Geeksforgeeks.org" >
</body>
</html>
Output:
HTML <input> Tag: This tag is used to insert an input field that can accept different types of inputs based on the value of the type attribute. It can also have attributes like name, alt, placeholder, etc.
Example 4: In this example, we will see the use of the <input> tag.
HTML
<!DOCTYPE html>
<html>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<input type="text" placeholder="Enter name...">
</body>
</html>
Output:
HTML <link> Tag: This tag is used to define a link between an HTML document and an external resource. It can have attributes like rel, charset, disabled, href, etc.
Example 5: In this example, we will see the use of the <link> tag.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
type="text/css"
href="style.css">
</head>
<body>
<h2>GeeksforGeeks</h2>
</body>
</html>
Output:
HTML <base> Tag: This tag is used to specify a base URL (that will be added at the start) for all the links present on that page. There can only be 1 base URL on a single page.
Example 6: In this example, we will see the use of the <base> tag.
HTML
<!DOCTYPE html>
<html>
<head>
<base href=
"https://media.geeksforgeeks.org/wp-content/uploads/20220113144322/"
target="_blank"/>
</head>
<body>
<img src="G-100x34.PNG"
width="150px"
height="150px">
</body>
</html>
Output:
<base> tag
HTML <meta> Tag: This is used to specify information about HTML web pages that are used by search engines. It can have attributes like name, content, charset, etc.
Example 7: In this example, we will see the use of the <meta> tag.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="description" content=
"A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles, quizzes and practice/competitive
programming/company interview Questions.">
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<p>A computer science portal for geeks</p>
</body>
</html>
Output:
Similar Reads
Tags vs Elements vs Attributes in HTML In HTML, tags represent the structural components of a document, such as <h1> for headings. Elements are formed by tags and encompass both the opening and closing tags along with the content. Attributes provide additional information or properties to elements, enhancing their functionality or
2 min read
What are empty elements in HTML ? An empty element is a component that doesn't have any embedded elements or text elements. Empty tags contain only the opening tag but they perform some action in the webpage. For example, <br> tag is an empty tag. In this article, we will see the empty tags in HTML & we will also focus on
3 min read
HTML Block and Inline Elements HTML elements are either block-level, which structure the layout and span full width (like <div> or <p>), or inline, which styles content within blocks without breaking the flow (like <span> or <a>). This distinction covers 80–90% of common HTML usage.Inline and Block Level E
3 min read
List of Input Elements in HTML Web forms, a vital component of the digital world, rely heavily on the ‘input element in HTML’ for data collection. To create effective forms, a solid understanding of the basic input types in HTML is indispensable.In this comprehensive guide, we explore the ‘input element in HTML’. Web forms use HT
3 min read
Explain Description Lists in HTML An HTML description list is a list of terms, with a description of each term. The HTML description list is represented as <dl>. Lists in HTML are used for specifying particular information in list form. There are various types of Lists in Html such as Ordered Lists, Unordered Lists, and descri
2 min read
Is HTML elements are same as tags or not ? HTML elements and tags are a lot different. Let's see what HTML elements and Tags actually are and their differences. The below image tells about HTML Elements and HTML Tags. HTML Tags: The starting and ending point parts of an HTML document are HTML Tags, which start with < (less than) and end w
2 min read