Differences between HTML & XHTML

**Resonate** · 11-14-2007 04:56 PM

Summary of HTML to XHTML;

Tags must be properly nested: overlapping elements are not allowed
Tags and attributes must be in lower case
All elements must be closed
Attribute values must always be quoted
Attributes cannot be minimized: For example, <option selected> is incorrect it should be instead: <option selected="true">
ID attribute replaces the Name attribute
Mandatory elements: XHTML documents require certain mandatory elements. The html, head, body and title elements must exist. Additionally there must be a DOCTYPE declaration.

The Most Important Differences:

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>

</ul>

This is correct:

<ul>

<li>Coffee</li>

<li>Tea

<ul>

<li>Black tea</li>

<li>Green tea</li>

</ul>

</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 an end 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 either have an end tag or the start tag must end with />.

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

The XHTML specification defines that the tag names and attributes need to be 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. All other elements can have sub (children) elements. Sub elements must be in pairs and correctly nested within their parent element. The basic document structure is:

<html>

</html>

Writing XHTML demands a clean HTML syntax.
Some More XHTML Syntax Rules:

Attribute names must be in lower case
Attribute values must be quoted
Attribute minimization is forbidden
The id attribute replaces the name attribute
The XHTML DTD defines mandatory elements

Attribute Names Must Be In Lower Case

This is wrong:

This is correct:

Attribute Values Must Be Quoted

This is wrong:

This is correct:

Attribute Minimization Is Forbidden

This is wrong:

This is correct:

Here is a list of the minimized attributes in HTML and how they should be written in XHTML:

HTML Version XHTML Version

compact

compact="compact"

checked

checked="checked"

declare

declare="declare"

readonly

readonly="readonly"

disabled

disabled="disabled"

selected

selected="selected"

defer

defer="defer"

ismap

ismap="ismap"

nohref

nohref="nohref"

noshade

noshade="noshade"

nowrap

nowrap="nowrap"

multiple

multiple="multiple"

noresize

noresize="noresize"

The id Attribute Replaces The name Attribute

HTML 4.01 defines a name attribute for the elements a, applet, frame, iframe, img, and map. In XHTML the name attribute is deprecated. Use id instead.

This is wrong:

This is correct:

Note: To interoperate with older browsers for a while, you should use both name and id, with identical attribute values, like this:

<img src="picture.gif" id="picture1" name="picture1" />

IMPORTANT Compatibility Note:
To make your XHTML compatible with today's browsers, you should add an extra space before the "/" symbol.
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 add the xml:lang attribute, like this:

<div lang="no" xml:lang="no">Heia Norge!</div>

Mandatory XHTML Elements

All XHTML documents must have a DOCTYPE declaration. The html, head and body elements must be present, and the title must be present inside the head element.
This is a minimum XHTML document template:

<!DOCTYPE Doctype goes here>

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

<head>

<title>Title goes here</title>

</head><body>

</body></html>

Note: The DOCTYPE declaration is not a part of the XHTML document itself. It is not an XHTML element, and it should not have a closing tag.
The XHTML standard defines three Document Type Definitions.
The most common is the XHTML Transitional.
<!DOCTYPE> Is Mandatory

An XHTML document consists of three main parts:

the DOCTYPE
the Head
the Body

The basic document structure is:

<!DOCTYPE ...>

<html>

<head>

</head>

</html>

The DOCTYPE declaration should always be the first line in an XHTML document.
An XHTML Example

This is a simple (minimal) XHTML document:

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>simple document</title>

</head>

<body>

<p>a simple paragraph</p>

</body>

</html>

The DOCTYPE declaration defines the document type:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
The rest of the document looks like HTML:

<html>

<head>

<title>simple document</title>

</head>

<body>

<p>a simple paragraph</p>

</body>

</html>

The 3 Document Type Definitions

DTD specifies the syntax of a web page in SGML.
DTD is used by SGML [COLOR=orange! important][COLOR=orange! important]applications[/color][/color], such as HTML, to specify rules that apply to the markup of documents of a particular type, including a set of element and entity declarations.
XHTML is specified in an SGML document type definition or 'DTD'.
An XHTML DTD describes in precise, computer-readable language, the allowed syntax and grammar of XHTML markup.

There are currently 3 XHTML document types:

STRICT
TRANSITIONAL
FRAMESET

XHTML 1.0 specifies three XML document types that correspond to three DTDs: Strict, Transitional, and Frameset.
XHTML 1.0 Strict

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Use this when you want really clean markup, free of presentational clutter. Use this together with Cascading Style Sheets.
XHTML 1.0 Transitional

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Use this when you need to take advantage of HTML's presentational features and when you want to support browsers that don't understand Cascading Style Sheets.
XHTML 1.0 Frameset

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Use this when you want to use HTML Frames to partition the browser window into two or more frames.
-----------------------------------------
Thanks to Resonate for this article

**shaun** · 11-30-2007 11:00 AM

thankx resonate.i just cleared my doubts by this.

**Resonate** · 11-30-2007 11:55 AM

Originally Posted by shaun

thankx resonate.i just cleared my doubts by this.

Your Welcome

**priji** · 02-25-2008 10:01 AM

Thanks to share the briefly informations, very useful messages.

**forums** · 05-18-2008 06:01 PM

Just to add something obvious (but not mentioned) XHTML is XML. HTML isn't!

**Gorkfu** · 05-18-2008 06:30 PM

XHTML is XML. HTML isn't!

Isn't that sorta misleading? It should be XHTML is HTML4.0 + XML... It's not purely just XML.

**garima** · 05-28-2008 05:52 AM

XHTML is not very different from the HTML 4.01 standard.some difference between html and Xhtml is:-

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

**dyamni** · 08-29-2008 06:54 AM

Hi

Thanks, to share this thing with me and also all of our web designer friends. This article sort out my queries, and also help me for choosing one of them.
I choose XHTML, It is strict but i can handle it.

thanks

**FreewareFreak** · 08-30-2008 05:36 AM

Originally Posted by garima

XHTML is not very different from the HTML 4.01 standard.some difference between html and Xhtml is:-

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

And these rules are good. It brings order to the Web. I hate looking at a source code and finding that it does not follow standards.

**smeagain** · 08-30-2008 07:52 AM

Whats missing is a list of advantages that would make it worthwhile to change from HTML to XHTML and a list of any disadvantages.

Webmaster SEO Tools, Resources, Web Hosting, Discussion Forums

Thread: Differences between HTML & XHTML

LinkBack

Thread Tools

Display

Differences between HTML & XHTML

thankx

Thread Information

Users Browsing this Thread

Similar Threads

Why using text/html for XHTML is bad

If u Use XHTML

URL Differences?

The purpose of XHTML

html 4.0 or xhtml 1.0 ?

Bookmarks

Bookmarks

Posting Permissions