Differences between HTML & XHTML - Webmaster Forums UK SEO SEM Webmaster Community Forum

Resonate · #1 (**permalink**) 11-14-2007, 03: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>

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

<head> ... </head>

<body> ... </body>

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

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

<frame noresize="noresize" />

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:

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

This is correct:

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

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>

<title>... </title>

</head>

<body> ... </body>

</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 · #2 (**permalink**) 11-30-2007, 10:00 AM

thankx resonate.i just cleared my doubts by this.

Resonate · #3 (**permalink**) 11-30-2007, 10:55 AM

Quote:

Originally Posted by shaun

thankx resonate.i just cleared my doubts by this.

Your Welcome

priji · #4 (**permalink**) 02-25-2008, 09:01 AM

Thanks to share the briefly informations, very useful messages.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Why using text/html for XHTML is bad	shaun	XHTML Forums	1	12-20-2007 08:39 PM
If u Use XHTML	shaun	XHTML Forums	0	11-30-2007 10:06 AM
URL Differences?	clangallacher	General Webmaster Talk	4	11-08-2007 06:24 AM
The purpose of XHTML	ForumJoiner	General Webmaster Talk	6	03-27-2007 11:13 AM
html 4.0 or xhtml 1.0 ?	darkstar_tfd	General Webmaster Talk	0	01-08-2007 01:08 PM