Anatomy of an HTML Tag
<!-- OPENING TAG CONTENT CLOSING TAG -->
<p> Hello! </p>
<!-- Tag with an ATTRIBUTE -->
<a href="https://ylearner.org" target="_blank">Learn HTML</a>
<!-- ↑ tag name ↑ attr name ↑ attr value ↑ content -->
<!-- VOID ELEMENT — no closing tag, no content -->
<img src="photo.jpg" alt="A photo">
<br>
<hr>
<input type="text">
<meta charset="UTF-8">| Part | Example | Rule |
|---|---|---|
| Tag name | p, h1, div | Lowercase by convention |
| Opening tag | <p> | Required for all elements |
| Closing tag | </p> | Required for all non-void elements |
| Attribute | href="url" | name="value" inside opening tag only |
| Content | Text or child elements | Between opening and closing tag |
| Void element | <img>, <br> | No content, no closing tag |
Nesting Rules
Elements must close in reverse order of opening. Think of it as a stack — last opened, first closed.
<!-- ✅ CORRECT — closed in reverse order -->
<p>This is <strong>bold <em>and italic</em></strong> text.</p>
<!-- ❌ WRONG — tags overlap (browser will try to fix this
but results are unpredictable) -->
<p>This is <strong>wrong <em>overlap</strong></em> text.</p>
<!-- ❌ WRONG — block element inside inline element -->
<a href="#"><p>Don't put paragraphs inside anchor tags</p></a>
<!-- ✅ CORRECT — block inside block, inline inside inline -->
<div>
<p>A paragraph <strong>with bold</strong> text.</p>
<p>Another paragraph with a <a href="#">link</a>.</p>
</div>Whitespace in HTML
HTML collapses multiple spaces and newlines into a single space when rendering. This means you can indent your code freely for readability — it won't affect the output.
<!-- These two produce identical output -->
<p>Hello World</p>
<p>
Hello
World
</p>
<!-- Output in both cases: "Hello World" -->
<!-- To force a non-breaking space: -->
<p>10 km</p>
<!-- To preserve whitespace exactly (code blocks): -->
<pre>
function hello() {
console.log("hi");
}
</pre>Case Sensitivity
HTML tag names and attribute names are case-insensitive — <P>, <p>, and <P> all work. However, always use lowercase — it is the universal convention, required by XHTML, and what every linter, validator, and team expects.
The DOM Tree
When the browser parses your HTML it builds a Document Object Model (DOM) — a tree of nodes representing every element and text in the document. Understanding the DOM helps you understand how CSS targets elements and how JavaScript manipulates the page.
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello</h1>
<p>World <a href="#">link</a></p>
</body>
</html>
<!-- DOM tree:
document
└── html
├── head
│ └── title ("My Page")
└── body
├── h1 ("Hello")
└── p
├── "World "
└── a ("link")
-->Validate Your HTML
The W3C HTML Validator (validator.w3.org) checks your HTML for errors — unclosed tags, invalid nesting, missing required attributes. Running your pages through it is a good habit, especially when something displays oddly and you can't find why.
📋 Summary
- Tags have: opening tag, content, closing tag. Void elements have no content or closing tag.
- Attributes go in the opening tag:
name="value". Always use double quotes. - Elements must be closed in reverse order (last opened = first closed).
- Tag names are case-insensitive but always write lowercase.
- HTML collapses whitespace — indent freely for readability.
- Use W3C Validator to catch syntax errors.
FAQ
Modern browsers have error-correction built in — they try to fix common mistakes like unclosed tags. However, the correction is not always what you intended and results vary between browsers. Always close your tags explicitly to get predictable output.
No. In HTML5 you can write <br> or <br/> — both are valid. The self-closing slash (/>) was required in XHTML but is optional in HTML5. Most developers omit it for brevity.