HTMLmarkup~8 mins

Self-closing tags in HTML - Browser Rendering Trace

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Render Flow - Self-closing tags

[Read <img>] -> [Recognize self-closing tag] -> [Create IMG node with no children] -> [Add attributes] -> [Render element as empty box]

The browser reads the self-closing tag, creates an element node without children, and renders it as a standalone element without needing a closing tag.

Render Steps - 3 Steps

Code Added:<img src="flower.png" alt="A flower" />

Before

[Empty page]

→

After

[Image box]
[flower.png]

The <img> tag inserts an image box where the picture appears. It is self-closing, so no closing tag is needed.

🔧 Browser Action:Creates IMG element node with attributes, no children, triggers layout and paint.

Code Sample

This code shows an image and a line break using self-closing tags that do not need separate closing tags.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Self-closing tag example</title>
</head>
<body>
  <img src="flower.png" alt="A flower" />
  <br />
</body>
</html>

Render Quiz - 3 Questions

Test your understanding

After adding the <img> tag in step 1, what do you see?

AA broken image icon with text

BA blank space with no image

CAn image displayed on the page

DA line break below the image

Common Confusions - 3 Topics

Why doesn't <img> need a closing tag like <div>?

Because <img> is a self-closing tag that cannot have child elements or content, the browser treats it as complete without a closing tag.

💡 Self-closing tags stand alone and show content immediately without wrapping anything.

Can I write <img></img> with a closing tag?

While browsers tolerate it, <img> is meant to be self-closing. Adding a closing tag can confuse the browser and is not standard HTML.

💡 Use self-closing tags without closing tags for cleaner, correct HTML.

Why does <br> create a line break but has no visible box?

<br> inserts a line break in text flow but does not create a visible box or content itself.

💡 Self-closing tags like <br> affect layout without showing a box.

Property Reference

Tag	Self-closing?	Content Allowed	Visual Effect	Common Use
<img>	Yes	No	Displays an image	Show pictures
<br>	Yes	No	Inserts a line break	Separate lines of text
<input>	Yes	No	Creates form input	User data entry
<div>	No	Yes	Container block	Group content

Concept Snapshot

Self-closing tags do not need separate closing tags. Examples: <img>, <br>, <input>. They cannot have child elements or content. They simplify HTML and affect layout or display directly. Browsers parse them as complete elements immediately.