A small piece of HTML can change what a visitor sees or how the browser understands a page. In this lesson, you will explore dom vs source markup: browser tree correction using a short example that you can inspect and change.
The Idea in Plain English
The browser does not display HTML by reading every character as text. Its parser tokenizes the source and constructs a tree of nodes called the DOM. When markup is malformed, the parser follows error-recovery rules and may change the tree.
HTML supplies the structure; JavaScript supplies the behavior described here. If you remove the script, check what remains usable for visitors.
A Working Example
Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.
<main>
<p>First paragraph.</p>
<p>Second paragraph.</p>
</main>What Each Part Does
- The main landmark identifies the page’s primary content.
- A paragraph keeps one idea together as readable text.
In the browser Elements panel, you may see inserted or rearranged nodes that were never written explicitly in the file.
Keep the example small while learning. Once it behaves as expected, try it inside a larger page and make sure the URLs, files and surrounding HTML are correct.
Try It Yourself
Try this next: see an implicit tbody in the inspector. Then inspect the page and explain what changed.
Common Beginner Mistakes
- Assuming the View Source window and the live DOM must always have the same structure.
- Changing several parts of the example at once, making it difficult to see which part caused a different result.
- Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.
Key Takeaways
- The browser does not display HTML by reading every character as text. Its parser tokenizes the source and constructs a tree of nodes called the DOM. When markup is malformed, the parser follows error-recovery rules and may change the tree.
- In the browser Elements panel, you may see inserted or rearranged nodes that were never written explicitly in the file.
- Test the markup in a browser, and check accessibility and real-world behavior where relevant.