The Head, CSS/JS & Standards›Pro· 20 min read
Doctypes, HTML vs XHTML & History
A little background so the old code you will meet in real projects makes sense.
What you will learn
- Understand the doctype declaration
- Know the difference between HTML5 and XHTML
- Recognise older syntax
The doctype
Modern pages start with <!DOCTYPE html> — short and simple. Older pages had long, scary doctypes for HTML 4 or XHTML. If you see a giant doctype line in old code, that is why.
HTML5 vs XHTML
| HTML5 (today) | XHTML (older) | |
|---|---|---|
| Closing empty tags | <br> is fine | Required <br /> |
| Case | Lowercase preferred | Lowercase required |
| Strictness | Forgiving | Very strict |
| Use today | ✅ Always | ❌ Legacy only |
Note: You will sometimes see <br /> or <img ... /> with a trailing slash in older code or in JSX/React. In HTML5 the slash is optional and harmless — write whichever your team prefers, but <br> is the modern norm.
Tip: You never need to write XHTML today. Just start every page with <!DOCTYPE html> and write clean HTML5.
Q. What is the correct modern doctype?
Answer: Modern HTML5 uses the short <!DOCTYPE html>. The long doctypes are from older HTML4/XHTML.
✍️ Practice
- Look at the source of an old website and find its doctype — is it HTML5 or older?
🏠 Homework
- Write one paragraph: why is HTML5 easier to write than XHTML?