HTML Void Elements: List and Examples

What Are Void Elements?

A void element is an element that the HTML specification defines as having no content. Because it has no content, it also has no closing tag. It is complete in a single tag.

Most elements work like this:

<p>Content goes here</p>

A void element works like this:

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

There is no </img>. The single tag is the whole element.

The anatomy of a void element

Why Do Void Elements Exist?

Void elements exist because some HTML elements represent things that simply do not have content. A line break has no content. An image has no content — its content is the picture file. A form input has no content — it is a control. Metadata has no content.

For these elements, an opening tag and a closing tag would be meaningless. What would go between <br> and </br>? Nothing. So the spec defines them as void.

What void elements represent

In every case, the element is a “pointer” to something — a resource, a break, a control, or a piece of metadata. It has no content of its own.

The Complete List of Void Elements

HTML5 has exactly 14 void elements. Every other element in the language has a closing tag. Here is the full list, with a short description of each.

The Most Common Void Elements in Detail

Six of the 14 void elements appear on nearly every page you will ever build. Here they are, with full working examples.

<img> — the image element

The <img> element embeds an image from an external file. Its two required attributes are src (which file) and alt (a text description).

<img src="https://inarlearn.com/images/photo.jpg"
     alt="A mountain at sunrise"
     width="640"
     height="480">

The alt attribute is critical for accessibility — screen readers read it aloud, and browsers display it if the image fails to load.

<br> — the line break

The <br> element inserts a line break inside a block of text. It is useful for addresses, poems, or song lyrics — content where the line breaks are part of the meaning.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Line Break Example</title>
</head>
<body>
    <p>
        Inar Learn<br>
        123 Example Street<br>
        Dubai, UAE
    </p>
</body>
</html>

Each <br> creates a real line break in the rendered paragraph. Without them, all the text would appear on one line.

<hr> — the thematic break

The <hr> element represents a thematic break between sections of content. It renders as a horizontal line by default, but the meaning is semantic — it marks a shift in topic.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Thematic Break</title>
</head>
<body>
    <p>First section of the page.</p>
    <hr>
    <p>A different section begins here.</p>
</body>
</html>

<input> — the form control

The <input> element creates a form control. Its behavior changes dramatically based on its type attribute.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Input Types</title>
    <style>
        body { font-family: system-ui, sans-serif; padding: 24px; background: #f8fafc; }
        label { display: block; margin: 10px 0 4px; font-weight: 600; font-size: 14px; }
        input { padding: 7px 11px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 14px; width: 100%; max-width: 320px; }
    </style>
</head>
<body>
    <label>Text input</label>
    <input type="text" placeholder="Your name">

    <label>Email input</label>
    <input type="email" placeholder="you@inarlearn.com">

    <label>Checkbox</label>
    <input type="checkbox"> Subscribe
</body>
</html>

<meta> — document metadata

The <meta> element lives inside <head> and provides information about the page — its character encoding, viewport, description, and so on.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A beginner's guide to HTML.">

<link> — external resource link

The <link> element creates a relationship between the current document and an external resource. It is most commonly used to load a stylesheet.

<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">

A Closer Look at Each Void Element

Here is the complete set of 14 void elements in a compact reference format, with a working example for each.

Syntax: With or Without the Trailing Slash

Void elements can be written in two ways. Both are valid HTML5.

The trailing slash is a legacy of XHTML, which required XML-style self-closing tags. HTML5 keeps the syntax for backward compatibility but does not require it.

Which should you use?

The modern convention is to omit the trailing slash. Most major style guides, the HTML spec itself, and every mainstream code formatter use the shorter form. The trailing slash has no effect on rendering.

<!-- Both of these render identically -->
<br>
<br />

<!-- Both of these are complete elements -->
<img src="photo.jpg" alt="Photo">
<img src="photo.jpg" alt="Photo" />

Self-closing syntax on non-void elements

The trailing slash syntax only works on void elements. Writing <div /> does not close a div in HTML5 — it is interpreted as an opening tag with no closing tag, and the browser will try to auto-close it.

Void Elements vs. Empty Elements

Void and empty are two different concepts. Confusing them is a common beginner mistake.

A void element cannot have content — it is defined that way. An empty element could have content but happens not to. Both look “empty” on the page, but only one has no closing tag.

<!-- Void: no closing tag exists -->
<br>
<img src="photo.jpg" alt="Photo">

<!-- Empty: opening and closing tags, no content -->
<div></div>
<p></p>

Void Elements and the DOM

When the browser builds the DOM, each void element becomes a leaf node — a node with no children. This is a direct consequence of the fact that void elements have no content.

Here is a small page and its DOM tree:

<body>
    <img src="photo.jpg" alt="Photo">
    <br>
    <p>A paragraph</p>
</body>

The <img> and <br> are siblings of the <p>, but they have no children. The <p> has a text node child.

In JavaScript, you can check whether an element is void by looking at its children or childNodes property — it will always be empty.

Common Mistakes with Void Elements

A handful of void-element mistakes come up again and again. Here are the ones to watch for.

1. Adding a closing tag

2. Trying to add content inside a void element

3. Using self-closing syntax on a non-void element

4. Confusing void elements with empty elements

5. Adding a closing tag to a void element that “needs” one

6. Forgetting the alt attribute on images

7. Using <br> for spacing instead of margins

Best Practices

A few habits make your void elements clean, valid, and easy to maintain.

Key Takeaways

• A void element is an HTML element with no content and no closing tag — it is complete in a single tag.
• HTML5 has exactly 14 void elements: area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr, and the deprecated param.
• Void elements exist because they represent things with no content — a line break, an image, a form control, or metadata.
• The trailing slash (<br />) is optional. Modern HTML convention is to omit it.
• Void elements cannot contain content, and adding a closing tag to them is invalid.
• Void elements are not the same as empty elements. Empty elements have an opening and closing tag but no content.
• In the DOM, every void element is a leaf node with no children.
• Attributes carry all the information a void element needs.
• Self-closing syntax (<div />) only works on void elements — it does nothing on regular elements.
• Always include the alt attribute on <img>, and use <br> only for meaningful line breaks, not for spacing.

What to Learn Next

Now that you understand void elements, the next step is to strengthen your foundational HTML skills. Start with HTML Elements vs Tags and HTML Syntax Explained for the underlying rules.

For deeper coverage, explore HTML Elements, HTML Attributes, and Block vs Inline Elements. To understand how the browser parses and builds the DOM, see How Web Browsers Work and How Websites Work.

Practice Challenge

Build a small HTML page that uses void elements correctly. Your page should include:

• An <img> element with src, alt, width, and height attributes
• Two or three <br> elements creating a real line break inside a paragraph
• An <hr> element separating two sections
• A form with at least three <input> elements of different types
• A <meta charset="UTF-8"> in the head
• A <link rel="stylesheet"> to an external stylesheet
• At least one <wbr> in a long word to control word wrapping

Once your page renders, open it in a browser and inspect the DOM with DevTools. Confirm that each void element is a leaf node with no children. Then run the page through the W3C validator — a clean result means your void elements are correctly written.

If you can build a page that uses all the common void elements correctly, you have mastered one of the small but essential details of HTML.