HTML Versus XHTML Tutorial for Beginners – Simple Explanation

XHTML is a stricter version of HTML. It combines HTML with XML rules. Think of it as HTML that follows much stricter grammar and punctuation rules.

What is XHTML?

XHTML stands for EXtensible HyperText Markup Language. It is HTML defined as an XML application. In simple terms, it is HTML that follows the strict rules of XML.

XHTML was developed to make HTML more extensible and flexible to work with other data formats. All major browsers support XHTML.

Note: XHTML is not as commonly used today as HTML5. Most modern websites use HTML5. But understanding XHTML helps you write cleaner HTML code, and you might encounter it on older websites or in certain environments.

Why Was XHTML Created?

HTML is very forgiving. Browsers try to display pages even when the code has errors. A missing closing tag here, an unquoted attribute there. The page still works.

XHTML was created to enforce stricter rules. It forces developers to write clean, well-formed code. This is especially important when working with XML-based systems or other data formats.

XHTML vs HTML: Main Differences

Here are the most important differences between XHTML and HTML:

Rule	XHTML Requirement	HTML (often allowed)
DOCTYPE	Mandatory	Optional in HTML5 (but recommended)
xmlns attribute	Required on <html>	Not required in HTML5
Case sensitivity	All lowercase tags and attributes	Case insensitive (but lowercase recommended)
Closing tags	All elements must be closed	Some elements can be unclosed in HTML
Empty elements	Must self-close (like <br />)	Can be written as <br> in HTML
Attribute quotes	All attribute values must be quoted	Quotes optional in HTML (but recommended)
Attribute minimization	Forbidden. Use checked=”checked”	Allowed. Can write just “checked”
Nesting	Must be properly nested	Browsers often forgive improper nesting

XHTML Document Structure

An XHTML document must have a special DOCTYPE declaration and the xmlns attribute on the <html> tag.

Note: The example above uses XHTML 1.0 Strict. Notice the DOCTYPE is much longer than HTML5’s simple <!DOCTYPE html>.

Rule 1: Elements Must Be Properly Nested

In XHTML, elements must be nested correctly. The innermost element must close before the outer element closes.

Correct (Proper nesting)

<b><i>Some text</i></b>

The <i> closes before </b>.

Wrong (Improper nesting)

<b><i>Some text</b></i>

The <b> closes before </i>. This is invalid in XHTML.

Rule 2: All Elements Must Be Closed

In XHTML, every element that has a closing tag in HTML must be closed. No leaving out </p> or </li>.

Correct (All elements closed)

<p>First paragraph.</p>
<p>Second paragraph.</p>

Wrong (Missing closing tags)

<p>First paragraph.
<p>Second paragraph.

Rule 3: Empty Elements Must Self-Close

In XHTML, empty elements like <br>, <hr>, and <img> must be written with a closing slash.

Correct (Self-closing)

<br />
<hr />
<img src="photo.jpg" alt="Photo" />

Wrong (Not self-closing)

<br>
<hr>
<img src="photo.jpg" alt="Photo">

Rule 4: All Tags and Attributes Must Be Lowercase

XHTML requires lowercase for all tag names and attribute names.

Correct (Lowercase)

<body>
  <a href="https://modafvibe.com">Visit ModafVibe</a>
</body>

Wrong (Uppercase or mixed)

<BODY>
  <A HREF="https://modafvibe.com">Visit ModafVibe</A>
</BODY>

Rule 5: All Attribute Values Must Be Quoted

In XHTML, every attribute value must be inside quotes. Single or double quotes are fine, but quotes are required.

Correct (Quoted)

<a href="https://modafvibe.com" class="demo-link">Link</a>

Wrong (No quotes)

<a href=https://modafvibe.com class=demo-link>Link</a>

Rule 6: Attribute Minimization Is Forbidden

In HTML, you can write checked instead of checked="checked". In XHTML, you cannot. You must write the full attribute.

Correct (Full attribute)

<input type="checkbox" checked="checked" />
<input type="text" disabled="disabled" />

Wrong (Minimized)

<input type="checkbox" checked />
<input type="text" disabled />

Complete XHTML Example

Here is a complete, valid XHTML document following all the rules:

<!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>
  <title>My XHTML Page</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>

<h1>Welcome to My XHTML Page</h1>

<p>This is a paragraph in an XHTML document. All tags are properly closed and nested.</p>

<h2>My Favorite Websites</h2>
<ul>
  <li><a href="https://modafvibe.com">ModafVibe</a></li>
  <li><a href="https://google.com">Google</a></li>
  <li><a href="https://github.com">GitHub</a></li>
</ul>

<h2>Image Example</h2>
<img decoding="async" src="https://www.w3schools.com/html/smiley.gif" alt="Smiley face" width="42" height="42" />

<h2>Form Example</h2>
<form action="submit.html" method="post">
  <p>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" />
  </p>
  <p>
    <input type="checkbox" id="subscribe" name="subscribe" value="yes" checked="checked" />
    <label for="subscribe">Subscribe to newsletter</label>
  </p>
  <p>
    <input type="submit" value="Submit" />
  </p>
</form>

</body>
</html>

XHTML vs HTML5: Which One Should You Use?

For most modern web development, HTML5 is the recommended choice. Here is why:

HTML5 is simpler and less strict. You do not need to self-close empty elements.
HTML5 has more semantic elements (<article>, <section>, <nav>, etc.).
HTML5 has better multimedia support (<video>, <audio>).
HTML5 is more forgiving, which is better for beginners.
All modern browsers support HTML5 perfectly.

However, understanding XHTML rules is still valuable because:

It teaches you to write cleaner, more disciplined code.
You might encounter XHTML on older websites or projects.
Some XML-based systems require XHTML.
Following XHTML rules in HTML5 (like closing all tags and quoting attributes) is still good practice.

Quick Summary

XHTML is HTML that follows strict XML rules.
DOCTYPE and xmlns are mandatory in XHTML.
All elements must be properly nested and closed.
Empty elements must self-close (like <br />).
All tags and attribute names must be lowercase.
All attribute values must be quoted.
Attribute minimization is forbidden (use checked="checked" not checked).
HTML5 is recommended for new projects, but XHTML rules help you write cleaner code.

What Just Happened? Let Me Explain

XHTML was created to make HTML work better with XML systems. It never fully replaced HTML, but it influenced modern coding practices.
Many XHTML rules are still good practices in HTML5. Closing all tags, quoting attributes, and using lowercase are all recommended.
The self-closing slash (/>) is not required in HTML5, but it still works.
If you want to validate your XHTML, you can use the W3C Validator tool.
Do not worry too much about XHTML unless you specifically need it. Focus on learning HTML5 first.

Tip: Even though you are learning HTML5, try to follow the cleaner XHTML rules. Close all your tags, use lowercase, and quote your attributes. This will make you a better developer.

XHTML Reference

Here are the key XHTML rules we covered in this chapter:

Rule	XHTML Syntax	HTML5 (less strict)
DOCTYPE	`<!DOCTYPE ...>` (long)	`<!DOCTYPE html>`
Empty elements	`<br />` `<hr />`	`<br>` `<hr>`
Attribute quotes	`class="demo"`	`class=demo` (works but not recommended)
Attribute minimization	`checked="checked"`	`checked` (works but not recommended)