You Are Here

HTML and XHTML

What Is XHTML?

HTML and XHTML both languages are used in webpage designing.
XHTML stands for EXtensible HyperText Markup Language.
XHTML is similar to HTML but it is stricter than HTML in syntax and case sensitivity.
XHTML is supported by all browsers.
XHTML was developed by W3C(World Wide Web Consortium) to help web developers to make the transition from HTML to XML.

Why XHTML?

The XHTML was mainly developed to make HTML more extensible and to increase interoperability.
The two main reasons behind the creation of XHTML:
It is compatible with all major browsers.
It creates a standard that can be used on different devices without changes.
For example, HTML is used to create web pages but many pages on the internet contain “bad” HTML(“bad” HTML means HTML which not follow the HTML rule). This HTML code works well in most web browsers even if it does not follow the HTML rules.
<html>
<head>
<title> This is an example of bad HTML </title>
<body>
<h2> HTML
<div> HTML stands for Hypertext Markup Language
</body>
The above code of HTML does not follow the HTML rule although it runs. There are different browsers, some run on computers and some run on mobile phones and small devices. The main problem with the bad HTML is that it cant be interpreted by smaller devices. That’s why XHTML is developed to combine the strengths of HTML and XML. XHTML is HTML redesigned as XML. It helps to create a well-formatted code on your site.

HTML vs XHTML:

Document Structure:

  • The document must have a DOCTYPE
  • The xmlns attribute in <html> is mandatory
  • The <html>, <head>, <title>, and <body> are mandatory with their respective closing tags

XHTML Elements:

  • The XHTML elements must be properly nested
  • The XHTML elements must always be closed
  • The XHTML elements must be in lowercase
  • The XHTML documents must have one root element

XHTML Attributes:

  • All XHTML attributes must be in lower case
  • XHTML attributes cannot be shortened
  • XHTML attribute values must be quoted

<!DOCTYPE ....> Is Mandatory

The XHTML document must have a DOCTYPE declaration.
The <html>, <head>, <title>, and <body> elements must also be present, and the xmlns attribute in <html> must specify the xml namespace for the document.
The following example shows an XHTML document with a minimum of 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>
<title> Title of document </title>
</head>
<body>
some content here
</body>
</html>

XHTML Elements Must Be Properly Nested:

Some elements in HTML can be improperly nested with each other like this:
<i><b> This text is italic and bold </i></b>
The XHTML elements must be properly nested within each other, like this:
<i><b> This text is italic and bold </b></i>

XHTML Elements Must Always Be Closed:

This is incorrect:
<h2> This is a heading
<p> This is paragraph
This is correct:
<h2> This is a heading </h2>
<p> This is paragraph </p>

Empty Elements Must Also Be Closed:

This is incorrect:
A break: <br>
A horizontal rule: <hr>
An image: <img src="sample.jpg" alt="html and xhtml-sample-image">
This is correct:
A break: <br />
A horizontal rule: <hr />
An image: <img src="sample.jpg" alt="html and xhtml-sample-image" />

XHTML Elements Must Be In Lower Case:

This is incorrect:
<BODY>
<H2> This is a paragraph </H2>
</BODY>
This is correct:
<body>
<h2> This is a paragraph </h2>
</body>

XHTML Attribute Names Must Be In Lower Case:

This is incorrect:
<img src="sample.jpg" WIDTH="100%">
This is correct:
<img src="sample.jpg" width="100%">

Attribute Values Must Be Quoted:

This is incorrect:
<img src="sample.jpg" width=100%>
This is correct:
<img src="sample.jpg" width="100%">

Attribute Minimization Is Forbidden:

This is incorrect:
<input type="text" name="lastname" disabled />
This is correct:
<input type="text" name="lastname" disabled="disabled" />

How to Convert from HTML to XHTML:

  1. Add an XHTML <!DOCTYPE> to the first line of every page
  2. Add an xmlns attribute to the html element of every page
  3. Change all element names to lowercase
  4. Close all empty elements
  5. Change all attribute names to lowercase
  6. Quote all attribute values

How to validate HTML?

You can validate your HTML code using the W3C validator.
You just have to put your web address in the box below:


Note: You can learn about HTML in our HTML tutorial.

Ask a Question

Your email address will not be published. Required fields are marked *