Common HTML mistakes - Performance & Optimization

Performance: Common HTML mistakes

MEDIUM IMPACT

Common HTML mistakes affect page load speed, rendering stability, and user experience by causing unnecessary reflows, layout shifts, or blocking resources.

Structuring content with proper semantic tags

HTML

<header><h1>Title</h1><h2>Subtitle</h2></header>

Semantic tags provide clear structure, improve accessibility, and reduce layout shifts.

📈 Performance Gainreduces CLS and improves rendering predictability

Structuring content with proper semantic tags

HTML

<div><b>Title</b></div><div><i>Subtitle</i></div>

Using generic <div> with styling tags like <b> and <i> instead of semantic tags causes poor accessibility and may trigger layout shifts.

📉 Performance Costcan cause CLS due to unexpected style changes and reflows

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Using generic <div> with <b>/<i>	Low	1-2 reflows due to style changes	Medium	[X] Bad
Using semantic <header> and <h1>/<h2>	Low	Single reflow	Low	[OK] Good
Missing alt attribute on <img>	No extra DOM ops	No reflows	No paint cost	[!] OK but accessibility issue
Proper alt attribute on <img>	No extra DOM ops	No reflows	No paint cost	[OK] Good
Invalid nesting <p><div>	Browser reparses DOM	Multiple reflows	High	[X] Bad
Correct nesting <div><p>	Normal DOM ops	Single reflow	Low	[OK] Good

Rendering Pipeline

Common HTML mistakes cause the browser to spend extra time fixing invalid markup during parsing, which delays style calculation and layout, leading to reflows and layout shifts.

→Parsing

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout stage due to forced reflows from invalid or missing tags

Core Web Vital Affected

CLS

Common HTML mistakes affect page load speed, rendering stability, and user experience by causing unnecessary reflows, layout shifts, or blocking resources.

Optimization Tips

1Always use semantic HTML tags to improve accessibility and reduce layout shifts.

2Ensure all images have descriptive alt attributes to help screen readers and improve INP.

3Avoid invalid nesting of HTML elements to prevent forced reflows and CLS.

Performance Quiz - 3 Questions

Which HTML mistake can cause unexpected layout shifts affecting CLS?

A Using semantic tags like <header>

B Adding alt attributes to images

C Invalid nesting of elements

D Using external CSS files

DevTools: Elements and Performance panels

How to check: Use Elements panel to inspect HTML structure and check for invalid nesting or missing attributes. Use Performance panel to record page load and look for layout shifts or forced reflows.

What to look for: Look for warnings about invalid HTML in Elements panel and layout shift markers or long reflow times in Performance panel.

Practice

1. Which of the following is a common mistake when writing HTML tags?

easy

A. Writing comments with <!-- comment -->

B. Using lowercase letters for tags

C. Adding spaces between attributes

D. Not closing tags properly, like forgetting </p>

Solution

1. Step 1: Understand proper tag closure

   HTML tags like <p> must be closed with </p> to define content boundaries.

2. Step 2: Identify the mistake

   Not closing tags properly breaks the page structure and can cause rendering issues.

3. Final Answer:

   Not closing tags properly, like forgetting </p> -> Option D

4. Quick Check:

   Close tags properly = A [OK]

Hint: Always match opening and closing tags exactly [OK]

Common Mistakes:

• Forgetting to close tags
• Self-closing tags without slash
• Mismatched tag names

2. Which of these is the correct way to write an image tag with an alt attribute?

easy

A. <img src='cat.jpg' alt='cat'>

B. <img src="cat.jpg" alt=cat>

C. <img src=cat.jpg alt=cat>

D. <img src=cat.jpg alt='cat'>

Solution

1. Step 1: Check attribute quoting rules

   HTML requires attribute values to be in quotes, either single or double quotes.

2. Step 2: Find the option with all attributes quoted

   <img src='cat.jpg' alt='cat'> uses single quotes around both src and alt values correctly.

3. Final Answer:

   <img src='cat.jpg' alt='cat'> -> Option A

4. Quick Check:

   Attributes need quotes = C [OK]

Hint: Always put quotes around attribute values [OK]

Common Mistakes:

• Missing quotes around attribute values
• Mixing quote types incorrectly
• Using invalid characters in attributes

3. What will the browser display when rendering this HTML snippet?

<div><p>Hello<div>World</p></div>

medium

A. Hello followed by World outside the paragraph

B. HelloWorld inside nested div and p tags correctly

C. Only Hello displayed, World ignored

D. A rendering error or broken layout

Solution

1. Step 1: Analyze tag nesting rules

   A <div> cannot be inside a <p> tag because <p> cannot contain block elements like <div>.

2. Step 2: Understand browser correction behavior

   The browser closes the <p> before the inner <div>, so "World" is outside the paragraph.

3. Final Answer:

   Hello followed by World outside the paragraph -> Option A

4. Quick Check:

   Invalid nesting moves content outside = A [OK]

Hint: Block tags can't go inside <p> tags [OK]

Common Mistakes:

• Placing block elements inside <p>
• Assuming browser ignores invalid nesting
• Not closing tags properly

4. Identify the error in this HTML snippet:

<ul>
  <li>Item 1
  <li>Item 2</li>
</ul>

medium

A. Using <li> inside <ul> is invalid

B. Missing closing tag for first <li> element

C. The <ul> tag should be <ol>

D. The second <li> tag is self-closing incorrectly

Solution

1. Step 1: Check list item tags

   Each <li> must be properly closed to separate list items.

2. Step 2: Identify missing closing tag

   The first <li> is not closed, so the browser may merge both items incorrectly.

3. Final Answer:

   Missing closing tag for first <li> element -> Option B

4. Quick Check:

   Close all
5. tags properly = B [OK]

Hint: Close every <li> tag to separate list items [OK]

Common Mistakes:

• Omitting closing
• Confusing <ul> and <ol>
• Incorrect nesting of list tags

5. You want to create a form with a label and input that is accessible and correct. Which snippet fixes the common mistake below?

<label>Name</label>
<input type="text" id="name">

hard

A. <label id="name">Name</label>\n<input type="text">

B. <label>Name<input type="text" id="name"></label>

C. <label for="name">Name</label>\n<input type="text" id="name">

D. <input type="text" id="name">\n<label>Name</label>

Solution

1. Step 1: Understand label-input association

   Labels should be linked to inputs using the for attribute matching the input's id.

2. Step 2: Check options for correct association

   <label for="name">Name</label>\n<input type="text" id="name"> uses for="name" on label and id="name" on input, making it accessible and correct.

3. Final Answer:

   <label for="name">Name</label>\n<input type="text" id="name"> -> Option C

4. Quick Check:

   Use for and id to link label and input = D [OK]

Hint: Use label's for attribute matching input's id [OK]

Common Mistakes:

• Not linking label and input
• Wrapping input inside label incorrectly
• Using id on label instead of for