Web design ›

Empty HTML Tags (21 Weird Things You Need To Know!)

31 Mar 2022 — Updated 26 Jan 2023

What is an empty tag?
What’s the difference between a container and an empty tag?
How many empty tags are there in HTML?
What elements are empty?
Do you need a closing slash for empty tags?
Do empty tags have a closing tag?
What happens if you add closing tags to empty tags?
What is an empty div?
Are empty divs bad?
Does a div require content?
Are empty divs bad for accessibility?
How to make an empty div take up space
How to select empty tags in CSS
How to check if an element is empty with javascript
How to empty an element with javascript
How do you style an empty span?
Can custom elements be empty tags?
Is img an empty tag?
Is br an empty tag?
Is input an empty tag?
Is hr an empty tag?
What is the emptiest HTML tag possible?

Welcome to the weird and wonderful world of empty HTML tags.

I know what you're thinking.

This might sound like a nothing topic but it's actually very interesting.

Empty tags have many uses and funny quirks that you should know about if you're working knee-deep in HTML.

Let's define what empty tags are and answer some tricky questions on this often avoided topic.

1. What Is An Empty Tag?

HTML elements that don't have closing tags such as <br>, <hr>, and <img> are considered empty tags, void tags, or self-closing tags as they cannot contain other elements or content. Container tags that have nothing inside them such as an empty div (<div></div>) are also referred to as an empty tag.

2. What’s The Difference Between A Container And An Empty Tag?

In HTML, container elements such as divs or spans have an opening tag (<div>) and a closing tag (</div>), and they are used to contain other elements or content. Empty tags (also called self-closing tags) such as <br>, <hr>, or <img> have no closing tag and they cannot contain other elements.

3. How Many Empty Tags Are There In HTML?

According to the HTML5 specification, there are 15 empty tags, these are also known as self-closing or void tags because they do not have a corresponding closing tag and they cannot contain other elements. Some common examples of empty tags include <br>, <hr>, <img>, <input>, <link>, and <meta>.

See to the HTML spec for official documentation.

Here is a list of all the empty elements (also called self-closing tags) in the HTML5 specification:

<area>
<base>
<br>
<col>
<embed>
<hr>
<img>
<input>
<keygen>
<link>
<meta>
<param>
<source>
<track>
<wbr>

5. Do You Need A Closing Slash For Empty Tags?

According to the WC3 HTML5 spec, closing slashes for empty tags are optional as is the space before the slash, so <br>, <br/>, and <br /> are all valid self-closing tags. For XHTML and XML documents with a MIME type of "application/xml", all empty tags must have a closing slash eg: <br/> or <br />.

My personal preference with HTML5 is to remove all closing slashes because it makes your markup simpler and shorter.

Any bytes you can save are always a bonus!

6. Do Empty Tags Have A Closing Tag?

Some HTML elements never contain other elements or content such as <br>, <hr>, or <img> tags, these are called void tags, empty tags, or self-closing tags. Empty tags do not have a closing tag. In HTML5, you can optionally include a trailing slash to indicate they self-close, eg: <br/> or <br />.

7. What Happens If You Add Closing Tags To Empty Tags?

Adding a closing tag to an empty tag such as <br></br> or <input type="text"></input> is invalid HTML. In HTML5, you can optionally indicate that a tag is self-closing by adding a trailing slash, eg: <br/> or <br /> . In XHTML or XML documents, all empty tags must have a closing slash to be valid.

8. What Is An Empty Div?

A div (or any container element) is considered empty if it does not contain any other elements, text, or whitespace such as spaces or line breaks. HTML comments, processing instructions, and CSS-generated content with the :before and :after pseudo-classes do not affect whether an element is empty.

9. Are Empty Divs Bad?

Empty divs (or any other container element) are only considered bad if they serve no purpose. Empty divs have many uses such as spacer elements, design elements, and placeholders for javascript actions. Empty tags are valid HTML but they do add to page weight and may cause some accessibility issues.

10. Does A Div Require Content?

A div does not require content. Empty divs are valid HTML and they are useful for many things such as spacer elements, design elements, and placeholders for javascript actions. An empty div will look like this <div></div> in your HTML source.

11. Are Empty Divs Bad For Accessibility?

Empty divs are not generally bad for accessibility because they are semantically empty. However, if you are using a div for a particular function that needs to be accessible (eg: from a screen reader) you can mark up its purpose with aria labels like this: <div aria-label="Menu button"></div>

Learn more about aria labels at mozilla.org.

12. How To Make An Empty Div Take Up Space

To make an empty div take up space, give it a height (or min-height) in CSS. If the div is floated, you will also need to add a width (or min-width) because floated elements automatically shrink to the size of their floated contents and an empty div contains nothing.

13. How To Select Empty Tags In CSS

You can select empty tags in CSS with the :empty pseudo class. Tags are only empty if they contain no whitespace or other elements. HTML comments, processing instructions, and CSS-generated content with the :before and :after pseudo-classes do not affect whether an element is empty.

Example empty tags

<div></div>

<div><!-- comment --></div>

Example non-empty tags

<div> </div>

<div>
    <!-- comment -->
</div>

<div>
</div>

14. How To Check If An Element Is Empty With Javascript

To check if a div (or any container element) is empty, use the childNodes property. This property returns a NodeList of the element's children, including text nodes, comments, and other elements. A return value of 0 means the div is empty. Self-closing tags such as <br> or <img> are always empty.

Here's an example:

const el = document.querySelector("#elementid");
console.log(el.childNodes.length);

If el.childNodes.length is 0 then your element is empty.

15. How To Empty An Element With Javascript

To empty an HTML element (such as a div) first select the element using javascript with getElementById() or querySelector() then set it's innerHTML property to an empty string. Alternatively, you can loop through an element's childNodes and remove them one by one with the removeChild() function.

Emptying an element with innerHTML

const el = document.querySelector("#elementid");
el.innerHTML = "";

Emptying an element with removeChild in a loop

const el = document.querySelector("#elementid");
while (el.hasChildNodes()) {
    el.removeChild(el.lastChild);
}

16. How Do You Style An Empty Span?

By default, an empty span (<span></span>) will not display. The four ways to make it visible are to, add dimensions (such as a width/min-width and a height/min-height), give it some padding, add a border, or place something inside it such as a non-breaking space ( ) or :before/:after content.

17. Can Custom Elements Be Empty Tags?

Custom HTML elements must always contain a hyphen (-) and have an opening tag and a corresponding closing tag such as <my-element></my-element>. Custom elements can contain nothing. A self-closing custom tag (also called an empty tag or void tag) is not valid HTML, eg: <my-element />.

See my complete guide to using custom tags here: Custom HTML Tags (18 Things To Know Before Using Them).

18. Is `<img>` An Empty Tag?

The <img> element is an empty tag because it does not have a closing tag and it cannot contain other content or elements. These tags are also called void tags or self-closing tags. In HTML5, you can indicate self-closing tags by adding an optional trailing slash like this: <img src="image.png" />

19. Is `<br>` An Empty Tag?

The <br> element is an empty tag because it does not have a closing tag and it cannot contain other content or elements. These tags are also called void tags or self-closing tags. In HTML5, you can indicate when a tag is self-closing by adding an optional trailing slash, eg: <br/> or <br />.

20. Is `<input>` An Empty Tag?

The <input> element is an empty tag because it does not have a closing tag and it cannot contain other content or elements. These tags are also called void tags or self-closing tags. In HTML5, you can indicate self-closing tags by adding an optional trailing slash, eg: <input/> or <input />.

21. Is `<hr>` An Empty Tag?

The <hr> element is an empty tag because it does not have a closing tag and it cannot contain other content or elements. These tags are also called void tags or self-closing tags. In HTML5, you can indicate when a tag is self-closing by adding an optional trailing slash, eg: <hr/> or <hr />.

BONUS! What Is The Emptiest HTML Tag Possible?

Just for fun, I have created the 'emptiest' HTML tag possible:

It's the shortest custom element allowed, only 3 characters.
Its name is 'empty' (em tee) <m-t>.
And it has nothing inside it!

Here it is:

<m-t></m-t>

Summary

There is a lot to know about empty HTML tags. Self-closing tags are empty, and so are container tags that have nothing inside them. Both types of empty tags have many uses and quirks that you should know about.

Are you using <div> tags to structure your website? Please read this first: Replace Divs With Custom Elements For Superior Markup

“I've been developing websites professionally for over two decades and running this site since 1997! During this time I've found many amazing tools and services that I cannot live without.”
— Matthew James Taylor