|
XML
|
DTD
|
Schemas
|
XSL
|
DOM
|
XHTML
|
|
Extensible HyperText Markup Language (XHTML) Tutorial
This tutorial covers the basics of XHTML. Before reading this
tutorial you should already be familiar with HTML and XML. Since there are many
great HTML sites available I do not discuss HTML here. However, you may want to
read my XML tutorial.
XHTML stands for Extensible
HyperText
Markup Language.
XHTML's goal is to replace HyperText
Markup Language (HTML).
It is very similar to HTML 4.0, but XHTML's syntax is stricter than HTML. This
is because XHTML is an XML application.
XHTML standards are defined by the
World Wide Web Consortium (W3C), which ensures that structured data
will be uniform and independent of applications or vendors. The W3C site is the
most complete reference of XHTML available.
Here are the main differences between XHTML and HTML:
-
Tags must be properly nested
Since XHTML documents are XML applications, overlapping elements are not
allowed. An element must have a closing tag before the next element's starting
tag.
<b><i>This text is bold and italic</b></i> This
is incorrect
<b><i>This text is bold and italic</i></b> This
is correct
|
-
Tags and attributes must be in lower case
This is because XML is case sensitive. The following specify different
elements:
<City> <CITY> <city>
<City Zip="06706">This is incorrect</city>
<city zip="06706">This is correct</city>
|
-
All elements must be closed
All empty elements must have an end tag or their start tag must end with />.
All non-empty elements must have an end tag.
Incorrect break<br>
Correct break<br/>
Correct break<br />
Incorrect horizontal rule<hr>
Correct horizontal rule<hr></hr>
|
NOTE:
To be compatible with current browsers, empty elements should have an extra
space like this: <hr>< /hr>
-
Attribute values must always be quoted
An element can optionally contain one or more attributes
in its start tag. An attribute is a name-value pair separated by an equal sign
(=). Attribute values must always be quoted.
<city zip="01085">Westfield</city>
zip="01085" is an attribute of the <city> element.
<message date="08/25/2000"> This is correct
<message date=08/25/2000> This is incorrect
|
-
Attributes cannot be minimized
<option selected> This is
incorrect
<option selected="true">This is correct
|
-
ID attribute replaces the Name attribute
<img src="mypicture.jpg" name="mypicture" /> This is incorrect
<img src="mypicture.jpg" id="mypicture" />
This is correct
|
NOTE:
To be compatible with current browsers, try this:
<img src="mypicture.jpg" id="mypicture" name="mypicture" />
-
Special characters
In XHTML script and style characters such as "<" and "&"
are treated as markup characters. You must use a CDATA
definition.
<script>
<![CDATA[
... your script code ...
]]>
</script>
|
-
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 DOCTYPE definition specifies the document type.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
|
Here's a sample XHTML template:
<!DOCTYPE html>
<html>
<head>
<title>Some Title</title>
</head>
<body>
.
.
body of page
.
.
</body>
</html>
|
|
Document Type Definitions
|
A The DOCTYPE definition line in an XHTML document
specifies the document type by referencing a Document Type
Definition (DTD). The DTD specifies the syntax and legal elements of
an XHTML document. Three types of documents are defined:
-
Strict
Used when you want to apply the strictest rules. XHTML should not contain any
presentational tags. Use Cascading Style Sheets for the display of data. The
Strict DTD includes elements and attributes that have not been deprecated or do
not appear in framesets.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
|
-
Transitional
Used when your document contains presentational tags. This is useful for
browsers that do not support Cascading Style Sheets. The Transitional DTD
includes everything in the strict DTD plus deprecated elements and attributes.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
|
-
Frameset
This is used when the page contains frames to split the browser window into two
or more panes. The Frameset DTD includes everything in the transitional DTD
plus frames as well.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/frameset.dtd">
|
A Valid
XHTML document one that adheres to the rules of a Document Type Definition. A
DTD defines the legal elements of an XHTML document.
You can use the W3C XHTML
Validator to validate your XHTML document.
|
|
About TheScarms
Sample code
version info
|