XHTML

° XHTML (Extensible Hyper Text Markup Language)
TUTORIAL-----------------------------------------------------------------------------

XHTML DTD

The XHTML standard defines three Document Type Definitions.

The most common is the XHTML Transitional.

The <!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 "-//karachiplus//DTD XHTML 1.0 Strict//EN"
"http://www.karachiplus.com/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 "-//karachiplus//DTD XHTML 1.0 Strict//EN"
"http://www.karachiplus.com/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 applications, 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 "-//karachiplus//DTD XHTML 1.0 Strict//EN" 
"http://www.karachiplus.com/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 "-//kaachiplus//DTD XHTML 1.0 Transitional//EN"
"http://www.karachiplus.com/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 "-//karachiplus//DTD XHTML 1.0 Frameset//EN"
"http://www.karachiplus.com/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.

XHTML Syntax

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:

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

This is correct:

<dl compact="compact">
<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	XHTML
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>
<head>
<title>Title goes here</title>
</head>

<body>
Body text goes here
</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.

You will learn more about the XHTML document type definition in the next chapter.

Back

.:: FINISHED ::.