Matthew James Taylor Matthew James Taylor

Web design ›

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

31 Mar 2022 — Updated 26 Jan 2023

Looking into an empty div

Table of contents

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.

4. What Elements Are Empty?

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

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 (&nbsp;) 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:

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

Matthew James Taylor

“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

I highly Recommend:

Jasper

Jasper — Best Content Creation Tool

Plan, outline, and write long-form website articles with the power of AI and produce content faster than ever.

Learn more

Surfer SEO

Surfer SEO — Best Content Optimization Tool

Use the power of AI to optimise your website content and increase article rankings on Google.

Learn more

SiteGround

SiteGround — Best Website Hosting

Professional Wordpress hosting with 24/7 customer support that is the best in the industry, hands down!

Learn more

Ezoic

Ezoic — Best ad network for publishers

Earn more than double the revenue of Google Adsense. It's easy to set up and there's no minimum traffic requirements.

Learn more

See more of my recommended dev tools.

Responsive Columns Layout System

Responsive Columns: Build Amazing Layouts With Custom HTML Tags

How responsive attributes work

Responsive Attributes: Generate CSS Grid Layouts With Simple HTML

Responsive text size

Responsive Font Size (Optimal Text at Every Breakpoint)

A web developer in the engine room

Best Web Development Tools (Free & Paid)

Columns all the same height

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

Boggle dice shaker

Boggle Dice Shaker (Built With Javascript)

Padding bewteen desktop, tablet, and mobile

Responsive Padding, Margin & Gutters With CSS Calc

Holy grail 3 column layout responsive diagram

Holy Grail 3-Column Responsive Layout (CSS Grid & Flexbox Versions)

Footer at the bottom of the page diagram

Bottom Footer (CSS Grid, Flexbox, & Absolute Position Methods)

Open book two column layout

2 Column Layouts (Responsive, Flexbox & CSS Grid)

3 column product comparison layout

3 Column Layouts (Responsive, Flexbox & CSS Grid)

Is CSS margin top or bottom better?

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

How to add CSS to HTML

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

Custom elements plus CSS with no javascript

Custom Element Examples (Without Javascript)

A delicious soup made from custom elements

Replace Divs With Custom Elements For Superior Markup

Racing car made from custom tags

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

ID vs Class CSS selectors

ID vs Class: Which CSS Selector Should You Use? (6 Examples)

Beautiful centered menus with CSS

CSS: Horizontally Centred Menus (With Optional Dropdowns)

Ads that can change size to fit any screen size

Responsive Banner Ads with HTML5 and CSS3

Superman blocking styles

Style Blocker: How To Prevent CSS Cascade With Shadow DOM

Responsive house plan

Responsive House Plan (Web Design Meets Architecture!)

Web design Web design Architecture Architecture Life drawing Life drawing Art gallery Art gallery Synesthesia Synesthesia Comics Comics

About Contact Privacy

© 1994 — 2024 Matthew James Taylor