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

Difficulty: 3/10

void elements, HTML parsing, markup validation

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.

Scenario Questions

0-2 years experience

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

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?