What are Self Closing Tags in HTML?
Learn via video course
FREE
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
What are Self-Closing Tags in HTML?
- A traditional HTML tag such as <p>, <div>, <section>, etc., had an opening tag and a closing tag. However, due to their fundamental structure, void components in HTML, such as images and links, do not technically require closing tags. Images and links cannot have content - they are pointers to an element installed on the website.
- Instead of including independent opening and closing tags in more modern HTML variants such as XHTML, developers employ a self-closing tag that includes a "/" within the carets (\<>). For example – <img src="image/circle" alt="example" />
Output
- A self-closing tag in HTML is a kind of HTML tag that does not need to be closed manually by its closing tag, which means it does not have a separate closing tag as </tag>. Some few self-closing tags are <input/>, <hr/>, <br/>, <img/>, etc.
- Self-closing tags in HTML are sometimes also known as empty tags, void tags, singletons tags, etc. This means that these tags have no content and cannot have any children.
Complete List of Self-Closing Tags for HTML5
| Tag | Description |
|---|---|
| <area> | The HTML <area> tag specifies an area within an image map with predetermined clickable zones based on coordinates, which subsequently accepts a URL and behaves as a hyperlink. This element can only be used inside an <map> element. |
| <base> | The HTML <base> tag specifies a base URI, often known as a base URL, for relative links in a document. A document can only include one <base> element. For example, you can specify the base URL once in the header area of your page, and all subsequent relative links will utilize that URL as a starting point. |
| <br> | The HTML <br> tag is used to create a line break in the text. It is typically employed in poems or addresses where line division is required. It is an empty tag, which means it contains no content and is referred to as a void element. Including the <br> tag in the HTML code functions similarly to pressing the enter key in a word processor. |
| <col> | The HTML <col> tag specifies the attributes for columns contained within the <colgroup> tag. This allows you to format or add a class to a column or group of columns rather than each individual cell. It is most commonly found within an <colgroup> element. This element specifies the style property for each column. |
| <embed> | The HTML <embed> tag is used to embed external applications, which are typically multimedia elements such as audio or video, at the specified place in an HTML document. It serves as a container for plug-ins such as flash animations. This is a new tag in HTML 5, and it just requires the beginning tag. |
| <hr> | The HTML <hr> tag is used to insert a horizontal rule or a paragraph-level thematic break in a Html document to split or separate document sections. It is used when the topic of your HTML content abruptly changes. It divides them by drawing a horizontal line. The <hr> tag is an empty tag that does not require a closing tag. For example, a change of scene in a story or a switch of the topic within a segment. |
| <img> | The HTML <img> tag is used to display or embed an image on the web page. The HTML image element is an inline and empty element that only includes attributes; closing tags are not used in the image element. |
| <input> | The HTML <input> tag is used to create interactive controls for web-based forms to accept data from the user; depending on the device and user agent, a wide variety of input data and control widgets are accessible. The element is among the most powerful and complex in all HTML tags due to the vast amount of input types and attribute combinations. It is used inside the <form> element to declare input controls that allow users to enter data. <label> can be used to define labels for the input element. |
| <link> | The HTML <link> tag is used to establish a connection between a current document and an external resource. The link tag is mainly used to connect to external sheets and establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices), among other things. This element can appear more than once, but it only appears in the head section. The link element's values indicate how the item is linked to and is related to the containing page. |
| <meta> | The HTML <meta> tag allows you to add metadata - extra essential information about a document in a number of ways. The <meta> elements can be used to incorporate name/value pairs specifying HTML document features such as expiry date, author, a list of keywords, document author, etc. You can include more than one meta tag in your document depending on the information you wish to maintain. Still, in general, meta tags do not affect the physical appearance of the document. Thus it makes no difference whether you include them or not. |
| <param> | The HTML <param> tag is used to pass a parameter to the object associated with the <object> element for plug-ins. We can use several <param> tags within an <object> element in any order, but each tag must have a name and value attribute and should be inserted at the beginning of the content. The parameter tag governs the behavior of the <object> element by specifying a distinct pair of name and value attributes, such as autoplay, controller, etc. |
| <source> | The HTML <source> tag is used as a child element to define multiple media resources for the <audio>, <video>, and <image> elements. It is widely used to provide the same media material in several file formats, such as mp3, mp4, and so on, in order to enable compatibility with a wide range of browsers due to their varying support for image and media file formats. Basically, it is used to attach multimedia assets such as audio, video, and images. |
| <track> | The HTML <track> tag is used as a child element of <audio> and <video> elements in order to define time-based text tracks for a media file. It is used to include a subtitle, caption, or any other type of text that will be rendered when a media file gets displayed. For example, it allows you to set timed text tracks (or time-based data) to handle subtitles automatically. WebVTT (Web Video Text Tracks) format (.vtt files) is used for the tracks. |
| <wbr> | The HTML <wbr> tag stands for word break opportunity. This tag denotes a spot within the text where the browser may optionally break a line, even though its line-breaking rules would not otherwise cause a break at that location. It is typically used when the employed term is too long, and there is a risk that the browser would break lines at the incorrect location in order to fit the content. |
Examples
Example 1: Using <br> tag.
Output
Example 2: Using <hr> tag.
Output
Example 3: Using <img> tag.
Output
Example 4: Using <input> tag.
Output
Is the Ending Slash Optional?
All tags in XML or XHTML can be used as self-closing by closing them with (<.. />).
- HTML5: Using a slash is absolutely optional.
- HTML4: Using a slash is technically invalid. However, the W3C's HTML validator still accepts it.
- XHTML: A slash is required, and all tags can be self-closed.
HTML5 does not require the closing of empty elements. However, if you want stricter validation or to make your page legible by XML parsers, you must close all HTML elements appropriately.
Closing tags vs. self-closing tags
| Closing tags | Self-closing tags |
|---|---|
| Closing tags necessitate the use of a closing tag. For example, <p> tag always need </p> | Self-closing tags do not necessitate a closing tag. For example, <input> is a self-closing tag. |
| Closing tags include content. For example, <h1>This is a heading </h1> | Self-closing tags do not contain any content. They are either empty or receive data from attributes to render. |
| Child elements exist in closing tags. | Child elements do not exist in self-closing tags. |
Learn more
Conclusion
- In HTML, an opening and closing tag combined into one is known as a self-closing tag. It is used to indicate that there is no content between the opening and closing tags. Some few examples of self-closing tags in HTML are <input/>, <hr/>, <br/>, <img/>, etc.
- Self-closing tags in HTML only have attributes and do not contain any content, and they also cannot have any children.