🔥 $100K Hit! Where Will Bitcoin Go Next? Find Out Live!

Code has been added to clipboard!

What Is XHTML: Learn the Difference Between HTML and XHTML

Reading time 3 min
Published Jun 23, 2017
Updated Feb 28, 2020

TL;DR – XHTML is a markup language based on HTML and XML. It is almost identical to HTML, but has much stricter rules.

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:

Example
<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:

Example
<input type="text" name="lastname" disabled="disabled" placeholder="You can't type here">

Note: in XHTML, every attribute must have a value assigned.

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
edX
Pros
  • A wide range of learning programs
  • University-level courses
  • Easy to navigate
  • Verified certificates
  • Free learning track available
Main Features
  • University-level courses
  • Suitable for enterprises
  • Verified certificates of completion

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:

Example
<b><i>This text is bold and italic</b></i>

In XHTML, closing nested elements in the wrong order will cause errors. See how you should nest elements in both HTML and XHTML:

Example
<b><i>This text is in both italic and bold</i></b>

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.