Self-closing tags in HTML - Browser Rendering Trace

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

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

A A broken image icon with text

B A blank space with no image

C An image displayed on the page

D A 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.

Practice

1. Which of the following HTML tags is a self-closing tag?

easy

A. <br>

B. <div>

C. <p>

D. <section>

Solution

1. Step 1: Understand what a self-closing tag is

   A self-closing tag does not need a separate closing tag like </tag>.

2. Step 2: Identify the self-closing tag among options

   <br> inserts a line break and is self-closing. The others require closing tags.

3. Final Answer:

   <br> -> Option A

4. Quick Check:

   Self-closing tag = <br> [OK]

Hint: Self-closing tags don't have separate closing tags [OK]

Common Mistakes:

• Thinking <div> is self-closing
• Confusing paragraph <p> as self-closing
• Assuming all tags without content are self-closing

2. Which of these is the correct syntax for a self-closing img tag in HTML5?

easy

A. <img src='image.jpg'>

B. <img src='image.jpg'></img>

C. <img src='image.jpg' />

D. <img src='image.jpg'</>

Solution

1. Step 1: Recall HTML5 self-closing tag syntax

   In HTML5, self-closing tags like img can be written with or without a slash before the closing angle bracket, but the slash is optional and allowed.

2. Step 2: Check each option's correctness

   <img src='image.jpg' /> is correct and valid HTML5 syntax. <img src='image.jpg'></img> wrongly adds a closing tag. <img src='image.jpg'> is also valid but less explicit. <img src='image.jpg'</> is invalid syntax.

3. Final Answer:

   <img src='image.jpg' /> -> Option C

4. Quick Check:

   HTML5 self-closing img = <img src='...' /> [OK]

Hint: In HTML5, slash before closing bracket is optional but allowed for self-closing tags [OK]

Common Mistakes:

• Adding a closing tag to <img>
• Using incorrect slash placement
• Confusing XHTML syntax with HTML5

3. What will the following HTML code display in a browser?

<p>Hello<br>World</p>

medium

A. Hello and World on separate lines

B. Hello World on the same line

C. Hello<br>World as text

D. Syntax error, page won't load

Solution

1. Step 1: Understand the role of <br> tag

   The <br> tag inserts a line break, moving content after it to a new line.

2. Step 2: Analyze the given code output

   The paragraph shows "Hello" then a line break, then "World" on the next line.

3. Final Answer:

   Hello and World on separate lines -> Option A

4. Quick Check:

   <br> creates line break = separate lines [OK]

Hint: Remember <br> breaks line, no closing tag needed [OK]

Common Mistakes:

• Thinking <br> shows as text
• Expecting <br> to need closing tag
• Assuming no line break happens

4. Identify the error in this HTML snippet:

<img src='photo.jpg'></img>

medium

A. The src attribute is missing

B. The <img> tag should not have a closing tag

C. The tag should be written as <image>

D. The quotes around the attribute value are incorrect

Solution

1. Step 1: Recall rules for <img> tag

   The <img> tag is self-closing and does not require a closing tag like </img>.

2. Step 2: Identify the error in the snippet

   The snippet incorrectly uses </img> which is invalid HTML and should be removed.

3. Final Answer:

   The <img> tag should not have a closing tag -> Option B

4. Quick Check:

   Self-closing tags don't have closing tags [OK]

Hint: Self-closing tags never have separate closing tags [OK]

Common Mistakes:

• Adding closing tag to <img>
• Confusing <img> with container tags
• Ignoring HTML5 syntax rules

5. You want to add a horizontal line and a line break between two paragraphs. Which is the correct HTML code using self-closing tags?

hard

A. <p>First paragraph.</p><hr/><br><p>Second paragraph.</p>

B. <p>First paragraph.</p><hr/><br/><p>Second paragraph.</p>

C. <p>First paragraph.</p><hr><br/><p>Second paragraph.</p>

D. <p>First paragraph.</p><hr><br><p>Second paragraph.</p>

Solution

1. Step 1: Understand HTML5 self-closing tag usage

   In HTML5, self-closing tags like <hr> and <br> do not require a slash before the closing bracket.

2. Step 2: Check each option for correct syntax

   <p>First paragraph.</p><hr><br><p>Second paragraph.</p> uses <hr> and <br> without slashes, which is correct. Options B and C mix slash and no slash inconsistently. <p>First paragraph.</p><hr/><br><p>Second paragraph.</p> uses slash on <hr/> but not on <br>, inconsistent but valid in XHTML, not preferred in HTML5.

3. Final Answer:

   <p>First paragraph.</p><hr><br><p>Second paragraph.</p> -> Option D

4. Quick Check:

   HTML5 self-closing tags don't need slash [OK]

Hint: Use no slash for self-closing tags in HTML5 [OK]

Common Mistakes:

• Adding slash for self-closing tags unnecessarily
• Mixing XHTML and HTML5 syntax
• Forgetting to close paragraphs properly