HTML Empty Elements

Understanding Empty Elements

Some HTML elements do not contain content and therefore do not use an end tag. These are commonly called empty elements or void elements.

Unlike elements such as p, section, or strong, an empty element consists only of its start tag and any attributes it may require. Learning which elements are empty helps prevent invalid markup and unnecessary closing tags.

Empty Element Syntax

A normal HTML element can contain text or other elements between a start tag and an end tag.

<p>This is a paragraph.</p>

An empty element does not contain content and does not have an end tag.

<br>

The br element represents a line break. Because there is no content inside the element, there is no matching </br> end tag.

Empty elements may still contain attributes within their start tags:

<img src="photo.jpg" alt="Mountain landscape">

The img element has src and alt attributes, but it still does not contain child content or use an end tag.

Common Empty Elements

HTML includes several empty elements that are commonly used in webpages.

• area - defines an area inside an image map.
• base - specifies a base URL or default target for relative URLs.
• br - creates a line break.
• col - defines properties for table columns.
• embed - embeds external content.
• hr - represents a thematic break.
• img - embeds an image.
• input - creates a form control.
• link - links the document to an external resource.
• meta - provides document metadata.
• source - specifies media resources.
• track - specifies timed text tracks for media.
• wbr - indicates a possible line-break opportunity.

You do not need to memorize every empty element immediately. As you learn individual HTML elements, you will become familiar with which ones use end tags and which ones do not.

Empty Elements Do Not Use End Tags

Empty elements must not be written with separate HTML end tags.

Correct:

<br>
<img src="logo.png" alt="Company logo">
<input type="email" name="email">

Incorrect:

<br></br>
<img src="logo.png" alt="Company logo"></img>
<input type="email" name="email"></input>

The end tags shown in the incorrect examples are not valid end tags for these elements.

This is different from elements whose end tags may sometimes be optional. An empty element does not merely omit its end tag-the element is defined as having no end tag at all.

Empty Elements Cannot Contain Content

Because an empty element has no end tag, it cannot contain text or child elements.

For example, text cannot be placed inside an img element:

<!-- Incorrect -->
<img src="photo.jpg">Mountain photo</img>

Alternative text for an image is instead supplied through the alt attribute:

<img src="photo.jpg" alt="Mountain photo">

Likewise, an input element does not contain its label:

<label for="email">Email Address</label>
<input type="email" id="email" name="email">

The label and input are separate elements because the input element cannot contain child content.

Attributes on Empty Elements

Although empty elements cannot contain child content, they can use attributes just like other HTML elements.

<meta charset="utf-8">
<link rel="stylesheet" href="/css/styles.css">
<img src="/images/logo.png" alt="KD Web Design logo" width="240" height="80">
<input type="text" id="name" name="name" required>

The attributes provide the information the element needs to perform its purpose. For example, an img needs a resource location through src, while an input can use attributes such as type, name, and required.

The Trailing Slash

You may encounter empty elements written with a slash before the closing angle bracket:

<br />
<img src="photo.jpg" alt="Mountain landscape" />
<input type="text" name="username" />

This style became especially common with XHTML, where XML syntax required empty elements to be self-closed.

In modern HTML, the trailing slash is unnecessary. These tutorials use the simpler HTML syntax:

<br>
<img src="photo.jpg" alt="Mountain landscape">
<input type="text" name="username">

The slash does not turn an HTML element into an empty element. Whether an element is void is determined by HTML itself, not by adding / to the tag.

Empty Elements vs Elements with No Content

An empty element should not be confused with a normal element that simply happens to contain nothing.

For example:

<p></p>

The p element currently has no content, but it is not an empty element. A paragraph is capable of containing content and normally has both a start tag and an end tag.

Compare that with:

<br>

The br element is an empty element because HTML defines it as an element that cannot contain content and has no end tag.

A useful distinction is:

<p></p>   → normal element with no content
<br>      → empty element

Common Empty Element Mistakes

Most mistakes involving empty elements come from treating them like normal container elements or from confusing HTML syntax with older XHTML conventions.

• Adding an end tag such as </img> or </input>.
• Trying to place text or child elements inside an empty element.
• Assuming every HTML element requires both a start and end tag.
• Assuming a trailing slash is required in modern HTML.
• Believing that adding / makes any element self-closing.
• Confusing an empty element with a normal element that currently has no content.

Browsers may recover from some malformed markup, but relying on browser error correction can create unexpected document structures and makes the source code harder to understand.

Empty Element Best Practices

Empty elements are straightforward once you recognize that their structure is defined differently from normal container elements.

• Do not write end tags for empty elements.
• Do not place child content inside an empty element.
• Use the attributes required for the element's purpose.
• Use modern HTML syntax without an unnecessary trailing slash.
• Keep empty elements consistently formatted with the rest of your markup.
• Learn each element's content rules rather than guessing from how it appears in the browser.

Once you understand the difference between container elements and empty elements, their syntax becomes much easier to recognize when reading and writing HTML.

Summary

Empty elements, also called void elements, cannot contain child content and do not have HTML end tags. Examples include br, img, input, meta, and link.

Attributes may still be placed in an empty element's start tag, but a closing tag should not be added. Modern HTML also does not require the XHTML-style trailing slash. Recognizing these rules helps you write cleaner and more accurate HTML markup.