HTML XHTML

XHTML is HTML written in XML format.

What is XHTML?

  • XHTML refers to Extensible Hypertext Markup Language
  • XHTML is almost the same as HTML 4.01
  • XHTML is a stricter and cleaner version of HTML
  • XHTML is HTML defined in the way of XML application
  • XHTML is a W3C recommended standard published in January 2001
  • XHTML is supported by all major browsers

Why use XHTML?

Many pages on the Internet contain “bad” HTML.

If viewed in a browser, the following HTML code works perfectly (even if it does not comply with HTML rules):

<html> 
  <head> 
    <meta charset = " utf-8 "> 
    <title> This is non-standard HTML </title>
  </head>
  <body> 
    <h1> Non-standard HTML
    <p> This is a paragraph
 < body>

XML is a markup language that must be properly marked up and well-formed.

If you want to learn XML, please read our XML tutorial .

There are different browser technologies in today’s technology world. Some of them run on computers, while others may run on mobile phones or other small devices. Small devices often lack the resources and capabilities to explain “bad” markup languages.

So-by combining the strengths of XML and HTML, XHTML was developed. XHTML is HTML that has been redesigned as XML.

The most important difference compared to 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 lowercase
  • XHTML documents must have a root element

Attribute syntax

  • XHTML attributes must be lowercase
  • XHTML attribute values ​​must be enclosed in quotation marks
  • Minimization of XHTML attributes is also prohibited

<!DOCTYPE ….> is mandatory

XHTML documents must have an XHTML DOCTYPE declaration (XHTML DOCTYPE declaration).

You can find the complete XHTML document type in the tag reference manual of the rookie tutorial.

The <html>, <head>, <title>, and <body> elements must also be present, and the xmlns attribute in <html> must be used to specify the xml namespace for the document.

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 may not be nested within each other, like this:

<b> <i> Bold and italic text </b> </i>

In XHTML, all elements must be reasonably nested with each other, like this:

<b> <i> Bold and italic text </i> </b>

XHTML elements must have closing tags

Examples of errors:

<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 element must contain closing tag

Examples of errors:

Branch: <br> 
horizon: <HR> 
Pictures: <img src = " happy.gif " alt = " Happy face ">  

Correct example:

Branch: <br/> 
level: <HR/> 
Image: <img src = " happy.gif " alt = " Happy face " />   

XHTML elements must be lowercase

Error example:

<BODY> <P> This is a paragraph </P> </BODY>

Correct example:

<body> <p> This is a paragraph </p> </body>

Property name must be lowercase

Examples of errors:

<table WIDTH = " 100% "> 

Correct example:

<table width = " 100% "> 

The attribute value must have quotation marks

Examples of errors:

<table width = 100 %> 

Correct example:

<table width = " 100% "> 

Shorthand attributes are not allowed

Examples of errors:

<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

  1. Add an XHTML <!DOCTYPE> to your web page
  2. Add the xmlns attribute to the html element of each page.
  3. Change all elements to lowercase
  4. Close all empty elements
  5. Modify all attribute names to lowercase
  6. Add quotes to all attribute values