All XHTML documents require a DOCTYPE declaration, which associ-
ates a Document Type Definition (DTD) with the document so the
parser can compare the XHTML file against the rules defined by the
DTD. You can use three types of DTDs with XHTML documents:
strict, transitional, and frameset. To understand the differences
among the DTDs, you need to understand the concept of deprecated
HTML elements. Elements and attributes are said to be deprecated
If they will not be supported by future xhtml versions or are not
currently supported by various handheld devices. Common HTML
elements that are deprecated in the XHTML 1.0 specification include
<applet>, <basefont>, <center>, <dir>, <isindex>, <menu>, <s>
or <strike>, and <u>. Deprecated attributes include alink, align,
border, background, color, face, height, language, link, name,
size, text, vlink, and width. For an extensive list of deprecated
APPENDIX
A
elements
and attributes, read the XHTML specification at the W3C
Web
site (http://www.w3.org/).
One
of the most significant deprecated attributes is the name
attribute,
which is widely used in the HTML 4.0 specification.
It
was typically used in the <applet>,
<frame>,
<iframe>,
and
<img>
element
tags, and in the pseudo <a>
element.
A common
practice
in HTML was to name a section in a document using
<a
name = "top">...</a>.
The attribute value "top"
could
then
be referenced as the destination of a text hyperlink, as in
<a
href = "#top">Go to Top</a>.
In XHTML, the name
attribute
has
been replaced by the id
attribute.
Because not all browsers have
support
for the id
attribute,
it is a good idea to enter both a name
and
id
attribute
with the same value to ensure backward compatibility.
The
three DTDs are distinguished in part by the degree to which they
allow
or do not allow deprecated HTML elements:
•
Strict—The
strict DTD definition restricts the use of deprecated
tags. Because the markup validated by the strict definition leaves
no room for interpretation, CSS must be used to format the con-
tent for browser display. A DOCTYPE definition for the strict
document type is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
626
• Transitional—The transitional DTD definition allows the use of
deprecated tags during a conversion period when newer versions
of XHTML are released and older versions become outdated.
Because deprecated formatting tags are allowed, the transi-
tional definition does not require the use of CSS, although it is
recommended.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
For all activi-
ties and proj-
ects in this
book, you will
code your
pages to meet the speci-
fications defined for the
strict DTD.
• Frames—The frames DTD definition must be used when you want
to insert the <frameset> and <frame> elements on your page.
Because frames have been deprecated and do not meet accessibil-
ity standards, you should limit or (better yet) eliminate the use of
framesets in Web documents. In HTML code, framesets have been
replaced by a <table> or CSS layout. In PHP, the concept of divid-
ing the browser window into separate sections, each displaying
an individual XHTML page, has been replaced by a Web template
that uses include statements to populate dynamic content sections.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
APPENDIX
A
Structure
of an XHTML Document
The
DOCTYPE
declaration
must be the first line of code in your Web
page.
Next, you should include the four paired tags that structure an
XHTML
document: <html>,
<head>,
<title>,
and <body>.
The fol-
lowing
template meets the strict DTD specifications:
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>XHTML 1.0 Strict Template</title>
</head>
<body>
<p>[Placeholder for XHTML content]</p>
</body>
</html>
627
In the <head> section, you must include a <meta> element to pro-
vide information about the Web page’s character encoding. If you
do not indicate a character encoding scheme, the Web browser
will guess at which character scheme to use, which may affect how
the Web page appears in the browser. You should assign a value of
"text/html;charset=iso-8859-1" to the <meta> element’s content
attribute to specify the iso8859-1 character set, which represents
English and many western European languages. The following state-
ment shows how to construct the content-type <meta> elements:
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
All XHTML documents must use <html> as the root element. The
XML namespace attribute xmlns is required in the <html> ele-
ment and must be assigned a URI (Uniform Resource Identifier) of
"http://www.w3.org/1999/xhtml".
You may want to save this XHTML template as xhtml_template.html
and modify it whenever you need to structure a new XHTML docu-
ment. Simply add the new content to the template file and save the
modified Web document with an extension of .html or .php.
Well-formed XHTML Documents
Although XHTML uses the same syntax as HTML, it requires that
your code be well formed. A well-formed document must follow a
predefined syntax or structure. XHTML is a Web standard main-
tained by the W3C that ensures your code meets the specifications
APPENDIX
A
defined
for the DTD you selected. In order for an XHTML document
to
be well formed:
•
All
markup tags must be lowercase.
• All elements must have both an opening and closing tag or be a
single self-closing tag.
• All tags must be properly nested.
• All attributes must be assigned a value (enclosed in single or dou-
ble quotation marks).
628
Lowercase Markup Tags
Unlike earlier versions of HTML, where the standard was to key
markup tags in uppercase characters to distinguish them from con-
tent, XHTML requires that you key all tags in lowercase characters,
as shown in the following code:
<title>XHTML 1.0 Strict Template</title>
Required Opening and Closing Tags
In XHTML, you
cannot close
an empty
element with
a matching
closing tag. The syntax
<img src = "geek.
png" alt = "picture
of a geek god">
</img> is invalid.
In HTML, tags that did not mark up content, such as <br>, <hr>,
and <img>, were called empty elements and did not require a clos-
ing tag. In XHTML, you must insert a forward slash character (/)
before the closing right angle bracket of an empty element, essen-
tially opening and closing the tag within the left and right angle
brackets. These are often called self-closing tags. The W3C recom-
mends that you insert a space before the forward slash character, as
shown in the following code:
<img src = "geek.png" alt = "picture of geek god" />
In HTML, even though the paragraph <p> selector marked up a
section of text, it did not require an ending </p> tag to mark the
end of the paragraph. A blank line would be inserted with or with-
out the closing </p> tag. In XHTML, the ending paragraph tag is
required.
Properly Nested Tags
Nesting refers to how elements are placed inside other elements.
When you apply multiple tags to mark up the same content,
you must open and close the markup tags in a specific order. In
HTML, you could enter <strong><em>Bold and Italicized
Content</strong></em> to bold and italicize the marked-up text.
HTML was not concerned with the order in which elements were
opened and closed. In XHTML, when you nest tags, the first tag
APPENDIX
A
opened
must be the last tag closed, as shown in the following code.
The
<strong>
and
</strong>
tags
are shown in bold to identify them
as
the outer tags. The <em>
and
</em>
tags
are the inner tags.
<strong><em>Bold
and Italicized Content</em></strong>
Attributes
and Values
When
you added an attribute and value to a tag in HTML, placing
the
value in quotation marks was optional unless the value contained
spaces,
as in <table
width = 750>.
In XHTML, all attribute values
must
be surrounded by matching single (')
or double (")
quota-
tion
marks, such as <table
width = "750">.
In HTML, you were
also
allowed to use a “minimized” version of the attribute/value
pair.
For example, it was common to shorten the attribute/value
pair
checked
= "checked" to
the word checked.
When specifying
that
a particular radio button was already selected, you could use
<input
type = "radio" name = "gender" value = "male"
checked>.
629
In
XHTML, all attributes must be specified with the “maximized”
version
using the attribute/value pair. The following code shows the
XHTML
syntax to set the "gender"
radio
button and select the value
of
"male":
<input
type = "radio" name = "gender" value = "male"
checked
= "checked" />
HTML used a number of other minimized attributes, such as
selected, multiple, and noresize, that must be specified using the
maximized version in XHTML. For a complete list of minimized
attributes, visit the W3C Web site at http://www.w3c.org.
Validating an XHTML Document
After you save your XHTML document, you should validate it
against the style rules defined by the strict, transitional, or frameset
definitions.
In a browser, enter http://validator.w3.org/ in the location bar to
access W3C’s Markup Validation Service. You can validate files by
URI, File Upload, or Direct Input. If the document meets the stan-
dards specified by the DOCTYPE (in this instance, the XHTML 1.0
Strict), your results document will appear as shown in Figure A-3.
APPENDIX
A
630
Figure
A-3
Validating
a well-formed XHTML document
If
the structure of the XHTML document does not meet the stan-
dards
of the XHTML 1.0 strict DTD, the Validation Output in the
results
document will explain the errors. An example is shown in
Figure
A-4.
Figure
A-4
Validating
an XHTML document with errors
APPENDIX
A
In
this instance, the end tag for the <hr>
selector
was omitted on line
14
of the XHTML document.
<h2>Ready
to Donate a Vehicle?</h2><hr>
Once
the code has been modified to insert the forward slash charac-
ter
before the closing right angle bracket in the <hr
/> selector,
you
can
save the document, upload it to the server, return to the W3C
Markup
Validator, and click the Revalidate button to recheck the
modified
document.
In
the preceding example, the Validator identified four errors,
although
there was only one error in the XHTML document (the
omission
of the forward slash character in the <hr>
tag).
Once the
initial
error is corrected, the document will be checked and approved
as
XHTML 1.0 Strict. It is a good idea to locate and correct the errors
sequentially
because correcting the first error will often also correct
the
remaining errors.
If
you are
using Firefox
and have
installed the
Web
Developer Tool Bar
(https://addons.mozilla.
org/en-US/firefox/
addon/60), you can
select Tools | Web
Developer | Tools |
Validate HTML to validate
the currently displayed
browser page.
631
Using Cascading Style Sheets
When coding an XHTML document to meet the standards of the
“Strict 1.0,” the W3C recommends that you separate the data from
the display using Cascading Style Sheets. The term cascading refers
to the ability of Web pages to use CSS information from more than
one source. When a Web page has access to multiple CSS sources, the
styles “cascade” or “fall together.” In CSS-based design, the XHTML
content of the Web page is typed in the body of the XHTML docu-
ment and formatted by rules defined in a CSS style. To change colors,
sizes, and layout, you simply modify a style definition in the CSS.