Tutorials Tonight's Logo
Follow Us

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.

the correct way to write a self-closing tag

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.

writing self-closing tag

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.

  1. <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
  2. <base> - It defines the base URL for all the relative URLs in the document
  3. <br> - br is used to create a line break
  4. <col> - It defines a column in a table to define a common style or property of that column
  5. <embed> - It is used to embed external content on the webpage
  6. <hr> - It creates a horizontal line
  7. <img> - It is used to define an image
  8. <link> - It is mostly used to add external stylesheets to the HTML document
  9. <meta> - It is used to give metadata to the webpage
  10. <param> - It defines parameter to the object
  11. <source> - It is used to give multiple media of resources for audio, video, and pictures
  12. <track> - It is used in media files to provide times text tracks
  13. <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.

area tag

<map name="yourMap">
  <area shape="poly" coords="150,0,150,177,0,260" href="https://www.tutorialstonight.com/html/html-introduction.php" target="_blank" alt="HTML Tutorial">
  <area shape="poly" coords="0,260,150,178,300,260" href="https://www.tutorialstonight.com/css/css-introduction.php" target="_blank" alt="CSS Tutorial">
  <area shape="poly" coords="151,0,151,177,300,260" href="https://www.tutorialstonight.com/js/" target="_blank" alt="JavaScript Tutorial">
</map>

<img src="image.png" alt="image" usemap="#yourMap">

br tag

<!-- br tag create a like break -->
<p>The br tag <br> creating a <br> line break.</p>

hr tag

<p>Scene 1:</p>
<hr>
<p>Scene 2:</p>

img tag

<img src="cat.jpg" alt="image of a cat">

Frequently Asked Questions

  1. Q1. is hr a self closing tag?

    Yes, hr is a self-closing tag and you need not close it like <hr></hr>.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

Conclusion

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.

More Learning

Want to learn more about programming and web development? We have a few recommendations for you.

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.