HTML Self Closing Tags
In this tutorial, you will learn about self closing tags, how to use them, and close the self closing tag. Also, you will go through various self closing tags with descriptions and examples.
Self Closing Tag
A self closing tag is a type of tag in HTML that need not to be closed by a closing tag, which means there is no saperate closing tag for it as </tag>. For example <img /> tag, <input /> tag, <br /> tag, etc.
Self closing tags are also alternatively known as void tags, empty tags, singletons tags, etc. i.e these tags do not have contents and so also can not have any child. You can see in the example below:
<!-- All are self closing tags No content in these --> <img src="#URL" alt="image"> <br> <input type="text">
None of the self closing tags in the above code snippets has content within them, nor do they have child nodes.
Some of non self closing tags in HTML are <p>...</p>, <h1>...</h1>, <div>...</div>, <span>...</span>, <nav>...</nav>, etc.
The correct way to write a self closing tag
In HTML, closing a self closing tag with its closing tag is invalid. For example, closing a <input> tag like
<input></input> is not valid.
But the question is do we need to close these tags by using /> at the end of the tag. i.e <br />, <img />, etc.
There is no need to close void tags by a slash /> at the end of the tag. There is no meaning of slash at the end of the start tag even though you use it is ignored by the browsers.
In XHTML its rule to close the self closing tag by a slash at the end, so for the convenience of XHTML users HTML also allow closing tag like XHTML in HTML but simply ignores the slash.
Even if you close the tag browser remove the slashes and then render the element. See the picture below to understand.
Note - Even if the browser ignores the closing slash in void tags, it's good practice to close it because:
1. in frameworks like react js if these are not close, it creates an error
2. if you want your document to be readable by an XML parser then must close all elements
List of self closing tags in HTML
Here is a list of all the self closing tags in HTML with little description of all. Non of self closing tags can have content or child node.
- <area> - HTML area tag defines an area in an image based on coordinates which then accepts an URL and become a clickable area behaving like a hyperlink
- <base> - It defines the base URL for all the relative URLs in the document
- <br> - br is used to create a line break
- <col> - It defines a column in a table to define a common style or property of that column
- <embed> - It is used to embed external content on the webpage
- <hr> - It creates a horizontal line
- <img> - It is used to define an image
- <link> - It is mostly used to add external stylesheets to the HTML document
- <meta> - It is used to give metadata to the webpage
- <param> - It defines parameter to the object
- <source> - It is used to give multiple media of resources for audio, video, and pictures
- <track> - It is used in media files to provide times text tracks
- <wbr> - It provides a word break position in a paragraph for the browsers
Self closing tags in HTML example
Lets see example of few self closing tags.
<!-- br tag create a like break --> <p>The br tag <br> creating a <br> line break.</p>
<p>Scene 1:</p> <hr> <p>Scene 2:</p>
<img src="cat.jpg" alt="image of a cat">
Frequently Asked Questions
Q1. is hr a self closing tag?
Yes, hr is a self closing tag and you need not close it like <hr></hr>.
Q2. is img a self closing tag?
Yes, img is a self closing tag and it only has attributes and no content inside. You need not close it like.
Q3. is input a self closing tag?
Yes, input is a self closing tag. You need not close it as it is an empty tag. It only has attributes but no content.
Q4. which of the following is not a self closing tag?
1. <hr> 2. <br> 3. <em> 4. <img>
<em> is not a self closing tag, em tag is used for emphasis content.
Q5. which of the following is a self closing tag?
1. <article> 2. <nav> 3. <link> 4. <li>
<link> is a self closing tag, it is used to connect other document to your HTML file, mostly used to add external stylesheet.
self closing tags are empty tags that do not have content. They do not need to be closed however if self closed by /> then ignored by browsers.
- In HTML5: Closing empty tags by a slash is optional
- In XHTML: Closing empty tags by slash necessary