HTMLmarkup~10 mins

Common HTML mistakes - Browser Rendering Trace

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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 elements, but first 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 before starting the second , 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

Test your understanding

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

AIt auto-closes the first before starting the second

BIt ignores the second completely

CIt merges both paragraphs into one

DIt 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 tag, the browser auto-closes it before the next , but the layout may look merged. Always close tags properly.

💡 Each should have a closing 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?

only styles text visually. Use to mark important text so screen readers emphasize it.

💡 Use for importance, 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 for important text, not just . - Browsers auto-correct some mistakes but results may be unexpected. - Proper HTML helps both visuals and assistive technologies.