What are void (self-closing) elements in HTML?

Understanding Void (Self-Closing) Elements in HTML

Void elements, also known as self-closing elements, are HTML elements that do not have any content or closing tags. They are used to insert things like line breaks, images, or metadata into a page without wrapping any inner content.

Examples of Void Elements

Common Void Elements

1
<br> : Inserts a line break.
2<hr> : Creates a horizontal rule (line).
3
<img> : Displays an image.
4
<input> : Adds an input field.
5
<meta> : Defines metadata inside the <head>.
6<link> : Connects external resources like CSS.

Difficulty: 3/10

Topics: void elements, HTML parsing, markup validation

Scenario Questions

0-2 years experience

1
You need to add an image to a page. How would you write the HTML tag, and why don't you need a closing tag?
2
If you accidentally write <br></br> in your markup, what will the browser do, and is it valid?
3
When you create a custom component that renders an <input> element, what must you remember about its markup?

2-5 years experience

1
Your team notices that a form's submit button sometimes doesn't appear in older browsers. You discover the <input type='submit'> tag was written with a closing tag. Explain why this could cause issues and how you'd fix it.
2
During a refactor, a colleague changed <img src='...'> to <img src='...'></img>. The page layout broke. Walk me through why that happened and how you'd debug it.
3
You are building a markdown‑to‑HTML converter. How would you ensure that void elements are emitted correctly, and what edge cases would you watch for?

5-8 years experience

1
Our design system includes a component library that renders many void elements (img, input, br). At scale, we need to enforce correct markup across multiple teams. How would you design a linting or build‑time check to catch misuse of void elements?
2
We are migrating a legacy HTML codebase to a component framework that requires JSX syntax, where void elements must be self‑closing. What challenges arise, and how would you handle cases where existing markup uses closing tags?
3
Explain any performance implications of incorrectly closing void elements in a large single‑page application, especially regarding DOM diffing and re‑rendering.

8+ years experience

1
Our organization is standardizing on a universal component library used across web, mobile web, and email templates. How would you architect the handling of void elements to ensure consistency, accessibility, and compatibility across these platforms, given differences in rendering engines?
2
When planning a long‑term migration from HTML5 to a custom XML‑based UI language, how would you map HTML void elements, and what strategies would you use to avoid breaking existing content and SEO?
3
Discuss the trade‑offs of enforcing strict HTML validation for void elements in a CI pipeline versus allowing flexibility for third‑party content.

Follow-up Questions

❓Can you give an example of a tag that looks like a void element but actually isn't?
❓How does the HTML parser handle an unexpected closing tag on a void element?
❓What impact does misusing void elements have on accessibility or SEO, if any?