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

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

Refer to the HTML spec (source)

4. What Elements Are Empty?

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

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

Next up:
How to add CSS to HTML ›
Responsive columns layout system ›

Web Design Articles

Custom HTML Tags (18 Things To Know Before Using Them)

Web design

Equal-Height Columns (CSS Grid, Flexbox, Floated Containers, & Table Methods)

Web design

How to add CSS to HTML (With Link, Embed, Import, and Inline styles)

Web design

Replace Divs With Custom Elements For Superior Markup

Web design

Responsive Padding, Margin & Gutters With CSS Calc

Web design

Style Blocker: How To Prevent CSS Cascade With Shadow DOM

Web design

Responsive Font Size (Optimal Text at Every Breakpoint)

Web design

Responsive Columns: Build Amazing Layouts With Custom HTML Tags

Web design

Responsive House Plan (Web Design Meets Architecture!)

Architecture

Boggle Dice Shaker (Built With Javascript)

Web design

Get Down! How to Keep Footers at the Bottom of the Page

Web design

CSS: Margin Top vs Bottom (A Trick You Should Know)

Web design

CSS: Horizontally Centred Menus (With Optional Dropdowns)

Web design

Responsive Banner Ads with HTML5 and CSS3

Web design