Getting to know XHTML and HTML

Build 1501 on 14/Nov/2017  This topic last edited on: 21/Feb/2014, at 09:13

This introduction is for the beginners and it explains the basics about XHTML and HTML.

Click to toggle expandWhat is XHTML?

XHTML stands for EXtensible HyperText Markup Language, and it is almost identical to HTML 4.01, but it is a stricter and cleaner version.

XHTML is HTML defined as an XML application and it is supported by all major browsers.
Click to toggle expandWhy XHTML?

Many pages on the Internet contain "bad" HTML.

The following HTML code will work 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>

But, 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. XHTML is HTML redesigned as XML. XML is a markup language where documents must be marked up correctly and "well-formed".
Click to toggle expandThe Most Important Differences between XHTML and HTML

Document Structure

An XHTML document must have an XHTML DOCTYPE declaration.

A complete list of all the XHTML Doctypes is found in our HTML Tags Reference.

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

XHTML Elements

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>

This is wrong, although it will be rendered correctly by most browsers:

<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

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" />

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.

XHTML Attributes

This is wrong:

<table WIDTH="100%">

This is correct:

<table width="100%">

This is wrong:

<table width=100%>

This is correct:

<table width="100%">

This is wrong:

<input checked>

<input readonly>

<input disabled>

<option selected>

This is correct:

<input checked="checked">

<input readonly="readonly">

<input disabled="disabled">

<option selected="selected">

See also

Getting to know XML