Self-closing tags in HTML - Performance & Optimization

Performance: Self-closing tags

LOW IMPACT

Self-closing tags affect the parsing speed and DOM construction during page load.

Writing empty HTML elements efficiently

HTML

<img src="image.jpg" />
<br />
<input type="text" />

Self-closing tags are valid for void elements, allowing the browser to parse and build the DOM faster without corrections.

📈 Performance GainReduces parsing overhead and speeds up DOM construction

Writing empty HTML elements efficiently

HTML

<img src="image.jpg">
<br>
<input type="text">

Using separate closing tags for void elements is invalid HTML and can cause the browser to re-parse or fix the markup, slowing parsing.

📉 Performance CostTriggers extra parsing steps and potential reflows during DOM construction

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Incorrect closing tags on void elements	Extra parsing and DOM fixes	Possible reflows if DOM is corrected	Minimal	[X] Bad
Proper self-closing tags for void elements	Straightforward DOM creation	No extra reflows	Minimal	[OK] Good

Rendering Pipeline

Self-closing tags simplify the HTML parsing stage by clearly marking void elements, allowing the browser to build the DOM tree without guesswork or corrections.

→HTML Parsing

→DOM Construction

⚠️ BottleneckHTML Parsing

Core Web Vital Affected

LCP

Self-closing tags affect the parsing speed and DOM construction during page load.

Optimization Tips

1Always use self-closing syntax for void elements like <img />, <br />, <input />.

2Avoid separate closing tags on void elements to prevent parsing errors.

3Correct self-closing tags help browsers build the DOM faster and improve page load speed.

Performance Quiz - 3 Questions

Why should void elements like <img> use self-closing tags in HTML?

A To add extra styling options

B To help the browser parse HTML faster and avoid re-parsing

C To increase the size of the HTML file

D To make the page load slower

DevTools: Elements

How to check: Open DevTools, inspect the HTML elements, and verify void elements like <img>, <br>, <input> are self-closed properly.

What to look for: Look for warnings or automatic fixes in the Elements panel indicating invalid closing tags.

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