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.
HTML Syntax: Elements, Tags, and Attributes
HTML is built from elements: an opening tag, content, and a closing tag. Attributes on the opening tag configure the element. Getting the vocabulary straight makes everything else click.
<a href="/about" class="link">About</a>
<!-- ↑tag ↑attribute name="value" ↑content ↑closing tag -->
<img src="pic.jpg" alt="A cat"> <!-- void element: no closing tag -->| Term | Is |
|---|---|
| Element | the whole thing (tags + content) |
| Tag | <a> opening, </a> closing |
| Attribute | name="value" on the opening tag |
| Void element | no content/closing (img, br, input) |
Nesting must be balanced: tags close in the reverse order they opened — <p><strong>hi</strong></p>, never <p><strong>hi</p></strong>. Overlapping tags are invalid and browsers "fix" them unpredictably. Void elements like <img>, <br>, <input>, and <meta> have no content and no closing tag — they're self-contained. Attribute habits: quote values (required when they contain spaces; a good habit always), and boolean attributes like disabled or required need no value — their mere presence means true. Case: HTML tags are case-insensitive but lowercase is the universal convention. Validate your markup with the W3C validator — it catches unbalanced tags and typos instantly.
🏋️ Practical Exercise
- Write a paragraph element with a matching opening and closing tag.
- Add a
classattribute to that paragraph. - Create a void element such as
<img>or<br>. - Nest a
<strong>element correctly inside a<p>. - Add two attributes to a single element, e.g.
idandtitle.
🔥 Challenge Exercise
Write a short HTML snippet containing one void element, one element with two attributes, and one element nested two levels deep (for example a link inside a list item inside a list). Check it carefully: every non-void element needs a matching closing tag, and tags must nest rather than overlap.
📋 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.
Interview Questions
- What is the difference between an HTML element and an HTML tag?
- What is a void (self-closing) element? Give an example.
- What are attributes and where do they appear?
- Why must HTML tags be nested rather than overlapping?
- Are HTML tag names case-sensitive?
Related Topics
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.