TL;DR – XHTML is a markup language based on HTML and XML. It is almost identical to HTML, but has much stricter rules.
Contents
What is XHTML?
XHTML is a mix of HTML (the HyperText Markup Language) and XML (eXtensible Markup Language). Therefore, the name XHTML is interpreted as the eXtensible HyperText Markup Language.
Adding the rules of the easily-readable XML document structuring language to HTML resulted in a language that seems almost identical to HTML. While it has much stricter rules, they also improve the code's readability.
After they get used to it, a lot of developers actually prefer the cleaner code. The stricter standard also prevents incompatibility issues in different browsers and devices.
What's the Difference Between HTML and XHTML?
XHTML 1.0 was introduced by the World Wide Web Consortium after HTML4 but before HTML5. In the following sections, we will discuss the main differences that are relevant to both versions of HTML.
Tags and Elements
You don't need to worry about what are XHTML tags: both HTML and XHTML use the same ones, and syntax is also the same. The main difference is its accuracy. In XHTML, all tags must be written in lowercase and closed:
<html>
<head>
<title>A terribly messy HTML example</title>
<body>
<h1>All those unclosed tags!
<br>
<p>And yet HTML opens the page.
<p>XHTML would not be so nice.
</body>In HTML, we have empty elements that do not require closing tags. In XHTML, they need to be closed as well. While they do not have any content, they need to close themselves by containing a forward slash. In the example above, you could see the <br> tag. In XHTML, it would be written as <br />.
There are also elements that XHTML does not allow you to skip. First of all, it's the <!DOCTYPE> declaration. Not only you have to include it, but you also have to add the xmlns attribute to declare the XML namespace. Other tags your document must contain are <html>, <title>, <body> and <head>. They make up the overall page structure.
As for attributes, you should write their names in lowercase and wrap them in quotes:
<input type="text" name="lastname" disabled="disabled" placeholder="You can't type here">Note: in XHTML, every attribute must have a value assigned.
Element Nesting
In HTML, you are recommended to nest elements in correct order. It is a recommendation that allows you to keep your code neat: incorrect nesting is deemed unprofessional practice. However, the system actually works either way:
In XHTML, closing nested elements in the wrong order will cause errors. See how you should nest elements in both HTML and XHTML:
XHTML vs. HTML5
XHTML was created trying to solve a few issues HTML4 had, including but not limited to poor media support and cross-browser incompatibilities. However, its popularity fell with the introduction of HTML5. It solved the problems previous HTML versions had and offered a simpler Doctype, better cross-browser and cross-platform support, and complete compatibility (both backward and forward).
What is XHTML: Useful Tips
- Documents written in HTML and XHTML have different internet media type: it is text/html and application/xhtml+html, respectively.
- Though it's generally stricter, XHTML also allows leaving comments in your code just like simple HTML.