HTML — vs XHTML
Friendly introduction – what & why
When you first learn web pages you probably hear the term HTML everywhere.
HTML stands for HyperText Markup Language and it is the language browsers understand to build a page.
A few years after HTML became popular, a stricter cousin called XHTML appeared.
XHTML stands for eXtensible HyperText Markup Language.
It tries to combine the flexibility of HTML with the rigor of XML.
The goal of this lesson is to show you the practical differences, so you can decide which style to use today.
Core differences at a glance
| Feature | HTML 5 | XHTML 1.0 (Strict) |
|---|---|---|
| Doctype declaration | <!DOCTYPE html> | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| Tag case | Upper‑ or lower‑case allowed | All tags must be lower‑case |
| Attribute quoting | Optional quotes for simple values | Quotes required, must be double quotes |
| Self‑closing tags | <br> or <br/> both work | Must use <br /> (space before slash) |
| Document parsing | Lenient, “forgiving” parser | Must be well‑formed XML, otherwise the page fails to load |
Good to know: Modern browsers can render both HTML and XHTML, but they treat them differently under the hood.
Document type declaration (doctype)
The doctype tells the browser which set of rules to apply.
In HTML 5 the doctype is tiny and easy to remember:
<!DOCTYPE html>
In XHTML you must reference an external DTD (Document Type Definition):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
What the browser displays
The browser switches to “standards mode”, which means it follows the rules of the declared language.
Tag case and naming
HTML lets you write <DIV> or <div> – the browser will accept either.
XHTML forces you to write tags in lower‑case only.
<!-- HTML – both work -->
<DIV>Welcome</DIV>
<div>Welcome</div>
<!-- XHTML – only lower‑case is valid -->
<div>Welcome</div>
What the browser displays
A simple paragraph that says “Welcome”. In XHTML the upper‑case version would cause a parsing error.
Attributes – quoting and naming
In HTML you can sometimes drop the quotes around an attribute value:
<img src=logo.png alt=Logo>
XHTML does not allow that. Every attribute value must be wrapped in double quotes, and attribute names must be lower‑case.
<img src="logo.png" alt="Logo" />
What the browser displays
The image appears with the alternative text “Logo” if the picture cannot be loaded.
Self‑closing (void) elements
Some elements never have closing tags, like <br> or <hr>.
In HTML you may write them without a slash:
<br>
<hr>
XHTML requires the slash and a space before it:
<br />
<hr />
What the browser displays
A line break (`<br />`) and a horizontal rule (`<hr />`) appear exactly as in HTML.
Well‑formedness – the XML rulebook
XML (the foundation of XHTML) insists that a document be well‑formed.
That means:
- Every opening tag has a matching closing tag.
- Tags are properly nested.
- No stray characters outside the root element.
If any of these rules break, the browser will stop parsing and usually show a blank page.
Example of a broken XHTML page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Broken Example</title>
</head>
<body>
<p>This paragraph is not closed
</body>
</html>
What the browser displays
The page stays blank or shows an XML parsing error because the `<p>` tag is never closed.
When to choose HTML vs XHTML today
Most modern projects stick with plain HTML 5.
Reasons:
- Simpler syntax – fewer characters to type.
- Better compatibility with older browsers and tools.
- HTML5 adds many new semantic elements that XHTML does not need to reinvent.
However, if you are already working inside an XML pipeline (e.g., XSLT, RSS, SVG) you may prefer XHTML because it guarantees well‑formedness.
Common mistake: Mixing HTML‑style tags (like
<br>) inside an XHTML document will cause the page to fail validation.
Full side‑by‑side example
Below are two complete files that render the same visual result.
HTML 5 version
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is a paragraph with an <a href="https://example.com">example link</a>.</p>
<img src="cat.jpg" alt="A cat">
<br>
<hr>
</body>
</html>
XHTML 1.0 Strict version
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Simple Page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is a paragraph with an <a href="https://example.com">example link</a>.</p>
<img src="cat.jpg" alt="A cat" />
<br />
<hr />
</body>
</html>
What the browser displays
Both files show a heading “Hello, world!”, a paragraph with a link, an image of a cat, a line break and a horizontal rule.
Validation tools
You can check whether your markup follows HTML 5 or XHTML rules with online validators.
- HTML validator: https://validator.w3.org/
- XHTML validator: https://validator.w3.org/ (select “XHTML 1.0 Strict” from the dropdown)
Summary
- HTML 5 = forgiving, easy, modern.
- XHTML = strict, XML‑based, best for XML‑heavy workflows.
- Choose HTML unless you have a specific need for XML well‑formedness.
Common mistakes checklist
- Forgot the correct doctype for XHTML.
- Used upper‑case tag names in an XHTML document.
- Omitted quotes around attribute values in XHTML.
- Missed the space before the slash in self‑closing tags (
<br />). - Left an element unclosed, breaking well‑formedness.
Mini Practice
- Write a minimal HTML 5 page that displays “Hello” inside an
<h2>element. - Convert the page from exercise 1 into a valid XHTML 1.0 Strict document.
- Add an image to your XHTML page. Remember to close the
<img>tag correctly. - Intentionally break the XHTML page by removing a closing tag, then run it through the validator. What error do you see?
- Create a table with two columns that compares “HTML 5” and “XHTML” on three attributes of your choice. Use proper
<table>markup for XHTML.
Related Topics
Frequently Asked Questions about vs XHTML
What is vs XHTML in HTML?
vs XHTML is a fundamental concept in HTML. This lesson explains it step by step with clear examples, making it easy for beginners to understand.
How do I learn vs XHTML?
Start by reading the explanation above, then try the code examples. Practice by modifying the examples and experimenting with different values. Hands-on practice is the best way to learn vs XHTML.
Why is vs XHTML important in HTML?
vs XHTML is essential for HTML development. Understanding this concept will help you write better code and solve real-world problems more effectively.