An HTML document is a tree of nested elements. The parser follows explicit rules so that even imperfect markup yields a predictable DOM—still, write valid HTML to avoid surprises across browsers.
Doctype and root element
<!DOCTYPE html> is the single required preamble for modern HTML. It must appear once at the top so the browser uses standards mode instead of legacy quirks.
The root <html> wraps exactly two primary children in typical pages: head and body. Nothing useful belongs outside them except DOCTYPE.
Normal elements vs void elements
- Normal elements have a start tag, optional content, and an end tag:
<p>…</p>. - Void elements cannot contain children—examples include
img,br,meta,link,input. In HTML syntax you omit the closing slash (optional in XML-style).
Nesting rules
Close the most recently opened element first (“stack” discipline). Invalid nesting (e.g. block elements stuffed inside inline-only contexts without fixing structure) forces parsers to infer fixes that may not match your intent.
<p>This paragraph contains <strong>nested emphasis</strong>.</p>Rendered
This paragraph contains nested emphasis.
Void elements cheat sheet
<img src="/a.webp" alt="">
<br>
<input type="text" name="q">
<meta charset="utf-8">
<link rel="stylesheet" href="/app.css">None of these accept a closing </tag> with inner HTML—everything lives in attributes.
Whitespace demo
Collapsed in normal paragraphs vs preserved in pre
Line one
Line two extra spaces → collapse in a p.
Line one Line two
Case sensitivity
HTML tag and attribute names are ASCII case-insensitive in HTML documents, but lowercase is universal convention. Attribute values may be case-sensitive depending on context (e.g. id vs MIME types).
Whitespace
Multiple spaces and newlines usually collapse to single spaces in normal flow text nodes—use CSS white-space or pre when you need preserved formatting.
What bites developers in practice
- Optional tags: the parser may imply
html,head,body, or closures forp/li. Valid explicit markup is clearer for humans and tooling. - Interactive nesting: you cannot legally nest anchors, buttons, or other interactive elements—violations create unpredictable clickable regions.
- Void elements:
<br>,<img>,<input>etc. cannot hold children—if you mentally model them like components with slots, reset that mental model.
Why this mastery matters
Bug reports labeled “CSS issue” often trace back to malformed HTML that the parser quietly corrected. Debugging starts by comparing source → DOM tree → computed styles.
Important interview questions and answers
- Q: What is the purpose of ``?
A: It forces standards mode so browsers use modern layout/parsing behavior instead of legacy quirks mode. - Q: Why is semantic HTML important in interviews and production?
A: It improves accessibility, SEO, maintainability, and reduces ARIA/JS work by using native element behavior. - Q: What is the difference between `head` and `body`?
A: `head` stores metadata/resources for the document, while `body` contains user-visible content.
Tip: View page source on sites you admire—notice DOCTYPE and lang first.