HTML Empty Elements
HTML elements that only need an opening tag and do not need a closing tag are called empty elements.
They do not contain any content within them.
Here is a list of all the HTML empty elements.
Element | Details |
<area> | The element <area> is used to define an area inside an image map that has predefined clickable areas, which is used within the <map> element. |
<base> | The element <base> is used to specify a base URL for all the relative URLs of an HTML document. |
<br> | The element <br> is used to produce a single line break in a text. |
<col> | The element <col> is used to define a column of a table, which is generally included within the <colgroup> element. |
<embed> | The element <embed> is used to embed external content at a specific location on an HTML document. |
<hr> | The element <hr> is used to produce a thematic break between paragraphs or sections. |
<img> | The element <img> is used to embed an image into an HTML document. |
<input> | The element <input> is used to create interactive controls for web-based forms to accept input from the users. |
<keygen> | Not supported in HTML5 |
<link> | The element <link> is used to specify the relation between the current document with an external document. It is commonly used to link CSS stylesheets. |
<meta> | The element <meta> is used to specify metadata of an HTML document that cannot be specified using <base> , <title> , <link> , <script> , and <style> . |
<parm> | The element <param> is used to define a parameter for the <object> element. |
<source> | The element <source> is used to multi-media resources for the elements <picture> , <video> and <audio> . |
<track> | The element <track> is a child element of <audio> and <video> elements. |
<wbr> | The element <wbr> is used to define a position for word break opportunity, where the browser may optionally apply a break on a long word when needed. |
Examples
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<base href="/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World!!</h1>
<h2>Section 1</h2>
<p>Paragraph 1 line one content goes here.<br>Paragraph 1 line two content goes here.</p>
<img src="https://randomcodez.com/assets/logo/logo.png" alt="Random Codez logo" style="width:100px; height:80px;">
<hr>
<h2>Section 1</h2>
<p>Paragraph 1 line one content goes here.<br>Paragraph 1 line two content goes here.</p>
</body>
</html>
Overall
HTML empty elements do not include any content but have significant uses in the markup.