HTML- XHTML
XHTML is HTML written as XML.
What is XHTML?
- XHTML stands for Extensible HyperText Markup Language
- XHTML is almost identical to HTML 4.01
- XHTML is a stricter, more XML-based version of HTML
- XHTML is defined as an XML application by applying HTML
- XHTML was a W3C Recommendation published on January 26, 2001
- XHTML is supported by all major browsers
Why Use XHTML?
Many web pages on the Internet contain "bad" HTML.
The HTML code below runs perfectly fine in a browser (even though it's not following the HTML rules):
<html>
<head>
<meta charset="utf-8">
<title>This is an Unofficial HTML</title>
<body>
<h1>Unofficial HTML
<p>This is a paragraph
</body>
XML is a markup language where documents must be marked up correctly and well-formed.
If you want to learn more about XML, please read our XML Tutorial.
There are different browser technologies in the tech world today. Some run on computers, while others might run on mobile phones or other small devices. Small devices often lack the resources and capabilities to interpret "bad" markup languages.
So - by combining the strengths of XML and HTML, XHTML was developed. XHTML is HTML redesigned as XML.
The Most Important Differences from HTML:
Document Structure
- XHTML DOCTYPE is mandatory
- The XML namespace attribute in <html> is mandatory
- <html>, <head>, <title>, and <body> are also mandatory
Element Syntax
- XHTML elements must be properly nested
- XHTML elements must always be closed
- XHTML elements must be in lowercase
- XHTML documents must have one root element
Attribute Syntax
- XHTML attributes must be in lowercase
- XHTML attribute values must be quoted
- XHTML attribute minimization is prohibited
XHTML documents must be declared with the XHTML document type (XHTML DOCTYPE declaration).
You can find the full XHTML Document Types in the tutorialpro.org tag reference manual.
The <html>, <head>, <title>, and <body> elements must also be present, and the xml namespace must be specified in the <html> element.
The following example shows an XHTML document with the minimum required tags:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>Document Title</title>
</head>
<body>
Document Content
</body>
</html>
XHTML Elements Must Be Properly Nested
In HTML, some elements can be improperly nested like this:
<b><i>Bold and Italic Text</b></i>
In XHTML, all elements must be properly nested like this:
<b><i>Bold and Italic Text</i></b>
XHTML Elements Must Have Closing Tags
Incorrect example:
<p>This is a paragraph
<p>This is another paragraph
Correct example:
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Empty Elements Must Include a Closing Tag
Incorrect example:
Line Break: <br>
Horizontal Line: <hr>
Image: <img decoding="async" src="happy.gif" alt="Happy face">
Correct example:
Line Break: <br />
Horizontal Line: <hr />
Image: <img decoding="async" src="happy.gif" alt="Happy face" />
XHTML Elements Must Be in Lowercase
Incorrect example:
<BODY>
<P>This is a paragraph</P>
</BODY>
Correct example:
<body>
<p>This is a paragraph</p>
</body>
Attribute Names Must Be in Lowercase
Incorrect example:
<table WIDTH="100%">
Correct example:
<table width="100%">
Attribute Values Must Be Quoted
Incorrect example:
<table width=100%>
Correct example:
<table width="100%">
Attribute Minimization is Prohibited
Incorrect example:
<input checked>
<input readonly>
<input disabled>
<option selected>
Correct example:
<input checked="checked">
<input readonly="readonly">
<input disabled="disabled">
<option selected="selected">
How to Convert HTML to XHTML
- Add an XHTML <!DOCTYPE> to your web page
- Add the xmlns attribute to the <html> element on each page
- Change all elements to lowercase
- Close all empty elements
- Change all attribute names to lowercase
- Add quotes to all attribute values
Use the W3C Validator to Test Your XHTML
Please enter your URL in the input box below: