Before this lesson

No programming experience is needed. Use a plain-text editor and browser, and enable visible file extensions.

What you will be able to do

Create an HTML document, distinguish source text from the parsed DOM and rendered page, and diagnose why an edit is not visible.

Understand the mechanism

HTML declares what content means, rather than issuing commands to enlarge text. The browser parses characters into a DOM tree, then applies style and layout to its nodes. The same HTML can have many visual presentations, and identical-looking pages can have different structures. Establishing structure first makes later styling and interaction easier to change.

The doctype requests standards mode; it does not create visible content. The html language helps assistive technology choose pronunciation. The head contains encoding, viewport and title metadata, while the body contains page content. Browsers repair some invalid structures automatically, so a page that appears to work is not proof that the source is correct. Inspect both your file and the Elements tree.

Runnable example

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My first page</title>
</head>
<body>
  <h1>Hello, world!</h1>
  <p>I am learning to build websites.</p>
</body>
</html>

Trace and verify

Save the file as index.html and open it. Expect one heading, one paragraph and the tab title My first page. Change only title and refresh, then change only h1 and refresh: the updates appear in different places. Next edit a paragraph in the Elements panel. Reloading removes that edit because you changed the in-memory DOM, not the file on disk.

Common mistakes and boundaries

If markup appears as text, check for an accidental .html.txt extension. For corrupted characters, check both the file encoding and charset declaration. Do not paste an entire document inside another body element. Extra nodes in the Elements panel can be parser repairs rather than modifications to the original file.

Practice challenge

Create a Chinese introduction page with your name in the tab, one main heading and two paragraphs. Set the document language appropriately. Explain why refreshing undoes edits made in the Elements panel.

Reference solution and reasoning

Use lang="zh-CN" on html and set title and h1 independently. Create two sibling paragraphs instead of adding repeated br elements for spacing. Reloading rebuilds the DOM from the source, so unsaved in-memory edits disappear.

Lab: why source and the DOM disagree

A page can look plausible even when its markup is incorrectly nested. The parser constructs a tree; CSS selectors and JavaScript operate on that tree, not on the original character sequence. Run this isolated parser experiment in the Console of a practice page. It does not replace the current document.

Run this separate experiment in a modern browser Console; it is not a replacement for the main example above.

const source = '<p>Before<div>Inside</div>After</p>';
const parsed = new DOMParser().parseFromString(source, 'text/html');
console.log(parsed.body.textContent);
console.log([...parsed.body.children].map(node => node.tagName).join(','));
console.assert(parsed.body.children.length === 3);
console.assert(parsed.body.childNodes[2].textContent === 'After');

Expected observations

The first line is BeforeInsideAfter; the second is P,DIV,P. The repaired structure is equivalent to <p>Before</p><div>Inside</div>After<p></p>. After is a text node under body, outside the first paragraph.

Why this happens and where it stops applying

The div start tag closes the paragraph under HTML parsing rules. The later unmatched paragraph end tag results in an empty paragraph. A selector such as p div cannot match this tree. Inspect parent relationships in Elements before changing specificity or adding CSS. View Source answers a different question: what text was delivered. Visual similarity alone cannot establish correct document structure.

Extension challenge

Rewrite the markup to retain the before/block/after sequence without invalid nesting. Explain why children and childNodes can have different lengths.

Reasoned solution

Use <p>Before</p><div>Inside</div><p>After</p>. children includes elements; childNodes also includes text and comments. Formatting whitespace can become text nodes, so test the required relationships instead of assuming a fixed count of all nodes.

Further reading