Common HTML mistakes - Browser Rendering Trace

Render Flow - Common HTML mistakes

Read <html>

→Create HTML root node

↓

Read <head>

→Create HEAD node

↓

Read <body>

→Create BODY node

↓

Read child elements

→Create child nodes

↓

Build DOM tree

↓

Parse CSS

→Apply styles

↓

Layout and paint

↓

Composite layers

The browser reads HTML tags in order, builds a tree of elements (DOM), then applies CSS styles, calculates layout, paints pixels, and finally shows the page.

Render Steps - 3 Steps

Code Added:<div> container with two <p> elements, but first <p> missing closing tag

Before

[ ] (empty page)

→

After

[div]
 ├─ [p] Paragraph 1
 └─ [p] Paragraph 2

Browser tries to fix missing closing tag by auto-closing the first <p> before starting the second <p>, creating two paragraphs inside the div.

🔧 Browser Action:DOM tree auto-correction and reflow triggered

Code Sample

This code shows a missing closing tag for the first paragraph, which causes unexpected layout and structure in the browser.

HTML

<div>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</div>

Render Quiz - 3 Questions

After step 1, how does the browser handle the missing closing <p> tag?

A It auto-closes the first <p> before starting the second <p>

B It ignores the second <p> completely

C It merges both paragraphs into one

D It throws an error and stops rendering

Common Confusions - 3 Topics

Why does my paragraph text run together without spacing?

Because you forgot to close the first <p> tag, the browser auto-closes it before the next <p>, but the layout may look merged. Always close tags properly.

💡 Each <p> should have a closing </p> to separate paragraphs visually.

Why can't screen readers describe my images?

If your <img> tags lack alt attributes, screen readers have no text to read. Always add descriptive alt text for accessibility.

💡 Add alt="description" to every <img> for better accessibility.

Why does my bold text not feel 'important' to assistive tech?

<b> only styles text visually. Use <strong> to mark important text so screen readers emphasize it.

💡 Use <strong> for importance, <b> only for style.

Property Reference

Mistake	Effect on Visual	Effect on Accessibility	Browser Behavior
Missing closing tags	Layout may break or be unexpected	DOM structure unclear	Browser auto-corrects DOM, triggers reflow
Missing alt on images	Image shows normally	Screen readers cannot describe image	Paint image, no alt text in accessibility tree
Using <b> instead of <strong>	Text appears bold	No semantic importance conveyed	Paint bold text, no semantic role

Concept Snapshot

Common HTML mistakes: - Always close tags properly to avoid layout issues. - Add alt text to images for accessibility. - Use <strong> for important text, not just <b>. - Browsers auto-correct some mistakes but results may be unexpected. - Proper HTML helps both visuals and assistive technologies.

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