How Browsers Read HTML
A browser is the program that fetches your HTML and turns it into something people can see, hear and click. Chrome, Firefox, Safari and Edge all follow the same HTML standard, so well-written markup looks and behaves consistently across them.
The rule
The browser builds a tree, forgives mistakes, and ignores letter case.
It builds a tree. The browser reads your HTML from top to bottom and builds a tree of objects called the DOM (Document Object Model). Each element becomes a node; nested elements become children:
<body>
<h1>Trips</h1>
<p>Next stop: <em>Goa</em></p>
</body>Here body is the parent of h1 and p, and em is a child of p. CSS styles this tree and JavaScript changes it, so its shape matters.
It forgives mistakes. If you forget a closing tag, the browser does not show an error. It follows standard recovery rules and guesses. Sometimes the guess matches your intention, sometimes it does not, and you only find out when a style or script misbehaves. Forgiving is not the same as correct.
It ignores letter case in names. <P>, <p> and <P CLASS="x"> all mean the same thing, because tag and attribute names are case-insensitive. The modern convention is to write them all in lowercase. Attribute values are a different story: class="Menu" and class="menu" are two different class names.
The shortcut
When a page looks wrong, think in the tree, not in the text. Ask where each element sits in the DOM.
Notice the symptom
A whole page of text is italic, but you only meant one word to be.
The trap is trusting "it looks fine". Run your page through a validator, such as the one from the W3C, or check the tree in developer tools.
A good habit is to keep the developer tools open while you learn. The Elements panel (called Inspector in Firefox) shows the live DOM, not your source file, so any difference between what you wrote and what the browser built is a clue. If an element appears somewhere you did not put it, the browser was repairing a mistake.
Drills
Answer fast — trust the rule.
What is the DOM?
Are <DIV> and <div> the same element?
Are class="Card" and class="card" the same class?
You forgot a closing </p>, and the page looks fine. What is true?
Remember
- The browser parses HTML into a DOM tree, forgives mistakes and ignores case in names.
- Shortcut: when something looks wrong, think about where each element sits in the tree.
- Trap: "it renders, so it is right". Validate, and write names in lowercase.