XHTML is a stricter and cleaner version of HTML.


What is XHTML?

  • XHTML stands for EXtensible HyperText Markup Language
  • XHTML is almost identical to HTML 4.01
  • XHTML is a stricter and cleaner version of HTML
  • XHTML is HTML defined as an XML application
  • XHTML is a W3C Recommendation of January 2000.
  • XHTML is supported by all major browsers.

Why XHTML?

Many pages on the internet contain “bad” HTML.

The following HTML code will work just fine if you view it in a browser (even if it does NOT follow the HTML rules):

<html>
<head>
<title>This is bad HTML</title>
<body>
<h1>Bad HTML
<p>This is a paragraph
</body>

XHTML is HTML 4.01 redesigned as XML.

XML is a markup language where documents must be marked up correctly and “well-formed”.

Today’s market consists of different browser technologies. Some browsers run on computers, and some browsers run on mobile phones or other small devices. Smaller devices often lack the resources or power to interpret a “bad” markup language.

Therefore – by combining the strengths of HTML and XML, XHTML was developed.


The Most Important Differences from HTML:

  • 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

XHTML Elements Must Be Properly Nested

In HTML, some elements can be improperly nested within each other, like this:

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

In XHTML, all elements must be properly nested within each other, like this:

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

Note: A common mistake with nested lists, is to forget that the inside list must be within <li> and </li> tags.

This is wrong:

<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
<li>Milk</li>
</ul>

This is correct:

<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

Notice that we have inserted a </li> tag after the </ul> tag in the “correct” code example.


XHTML Elements Must Always Be Closed

Non-empty elements must have a closing tag.

This is wrong:

<p>This is a paragraph
<p>This is another paragraph

This is correct:

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

Empty Elements Must Also Be Closed

Empty elements must also be closed.

This is wrong:

A break: <br>
A horizontal rule: <hr>
An image: <img src=”happy.gif” alt=”Happy face”>

This is correct:

A break: <br />
A horizontal rule: <hr />
An image: <img src=”happy.gif” alt=”Happy face” />

XHTML Elements Must Be In Lower Case

Tag names and attributes must be in lower case.

This is wrong:

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

This is correct:

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

XHTML Documents Must Have One Root Element

All XHTML elements must be nested within the <html> root element. Child elements must be in pairs and correctly nested within their parent element.

The basic document structure is:

<html>
<head> … </head>
<body> … </body>
</html>

Attribute Names Must Be In Lower Case

This is wrong:

<table WIDTH=”100%”>

This is correct:

<table width=”100%”>

Attribute Values Must Be Quoted

This is wrong:

<table width=100%>

This is correct:

<table width=”100%”>

Attribute Minimization Is Forbidden

This is wrong:

<input checked>
<input readonly>
<input disabled>
<option selected>
<frame noresize>

This is correct:

<input checked=”checked” />
<input readonly=”readonly” />
<input disabled=”disabled” />
<option selected=”selected” />

The Lang Attribute

The lang attribute applies to almost every XHTML element. It specifies the language of the content within an element.

If you use the lang attribute in an element, you must also add the xml:lang attribute, like this:

<div lang=”it” xml:lang=”it”>Ciao bella!</div>

Mandatory XHTML Elements

An XHTML document must have a DOCTYPE declaration.

The html, head, title, and body elements must also be present.

<!DOCTYPE> Is Mandatory

An XHTML document consists of three main parts:

  • the DOCTYPE declaration
  • the <head> section
  • the <body> section

The basic document structure is:

<!DOCTYPE …><html>

<head>
<title>… </title>
</head>

<body> … </body>

</html>

Note: The <!DOCTYPE> declaration refers to a Document Type Definition (DTD). A DTD specifies the rules for the markup language, so that the browsers render the content correctly.


An XHTML Example

The example below 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>
</body>

</html>

Note: The xmlns attribute in <html>, specifies the xml namespace for a document, and is required in XHTML documents.


XHTML Different Doctypes

The <!DOCTYPE> declaration is the very first thing in an XHTML document, before the <html> tag.

The <!DOCTYPE> declaration is not an XHTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.

The <!DOCTYPE> declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers render the content correctly.

XHTML 1.0 Strict

This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

XHTML 1.0 Transitional

This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

XHTML 1.0 Frameset

This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset content.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

XHTML 1.1

This DTD is equal to XHTML 1.0 Strict, but allows you to add modules (for example to provide ruby support for East-Asian languages).

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

 


XHTML HowTo

The following steps shows how a website can be converted from HTML to XHTML in 6 simple steps:


1. Add a <!DOCTYPE>

Add an XHTML <!DOCTYPE> to the first line of every page:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Tip: Your pages must have a DOCTYPE declaration if you want them to validate as XHTML.


2. Add an xmlns Attribute

Add an xmlns attribute to the html element of every page:

<html xmlns=”http://www.w3.org/1999/xhtml”>

Note: The xmlns attribute specifies the xml namespace for a document, and is required in XHTML documents.


3. Change Tags And Attribute Names to Lowercase

A general “find-and-replace” function was executed to replace all uppercase tags with lowercase tags. The same was done for attribute names.


4. Quote All Attribute Values

Check every page to see that attribute values are quoted.


5. Close all Empty Tags

Empty tags are not allowed in XHTML. The <hr> and <br> tags should be replaced with <hr /> and <br />.

A general “find-and-replace” function was executed to swap the tags.

Close the <img> tags with /> the end of the tag.


6. Validate XHTML With The W3C Validator

Before an XHTML file can be validated, a correct DTD must be added as the first line of the file.

Input a web address in the box below:

Correct errors found (if any).


Posted by: Dhiraj kumar

You can support this website by sharing. Thank you!

 

You can support this website by sharing. Thank you!