XHTML
Jan 5, 2015
What is XHTML?
XHTML stands for Extensible Hypertext Markup
Language
XHTML is aimed to replace HTML
XHTML is almost identical to HTML 4.01
XHTML is a stricter and cleaner version of HTML
XML (Extensible Markup Language) is a markup
language designed for describing data
XHTML is HTML redefined as an XML application
XHTML is a bridge between HTML and XML
2
The problem with HTML
HTML started out as a way of describing the structure
of documents, with tags to indicate headers, paragraphs,
and the like
Because people wanted to control the appearance of
documents, HTML acquired tags to control fonts,
alignment, etc.
The result is a markup language that does both, but isnt
very good at either
HTML vs. XML
XML looks a lot like HTML, but-HTML uses a fixed set of
tags
With XML you make up your
own tags (and define what they
mean in a separate document)
HTML is designed to
display data to humans
XML is designed to describe
data to computers
Browsers are very tolerant
of errors in HTML
XML documents must be wellformed (syntactically correct)
All browsers can display
HTML
Most modern browsers can
display XML
4
From HTML to XHTML, I
XHTML elements must be properly nested
<b><i>bold and italic</b></i> is wrong
XHTML documents must be well-formed
<html>
<head> ... </head>
<body> ... </body>
</html>
Tag names must be in lowercase
All XHTML elements must be closed
If an HTML tag is not a container, close it like this:
<br />, <hr />, <image src="smile.gif" />
Note: Some browsers require a space before the /
5
From HTML to XHTML, II
Attribute names must also be in lower case
Attribute values must be quoted
Example: <table width="100%">
Attribute minimization is forbidden
Example: <table width="100%">
Example: <frame noresize="noresize">,
cannot be abbreviated to <frame noresize>
The id attribute replaces the name attribute
Wrong: <img src="picture.gif" name="picture1" />
Right: <img src="picture.gif" id="picture1" />
Best: <img src="picture.gif" name="picture1" id="picture1" />
SGML and DTDs
SGML stands for Standard Generalized Markup
Language
HTML, XHTML, XML and many other markup
languages are defined in SGML
A DTD, or Document Type Definition describes the
syntax to use for the current document
There are three different DTDs for XHTML--you can
pick the one you want
These DTDs are public and on the web
You must start your XHTML document with a reference to
one of these DTDs
7
DOCTYPE declaration, II
The three main DTDs are as follows:
Strict
Transitional
Frameset
DOCTYPE declaration, I
Every XHTML document must begin with one
of the DOCTYPE declarations (DTDs):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Strict
Use for really clean markup, with no display
information (no font, color, or size information)
If you are planning to use Cascading Style Sheet (CSS)
strictly and avoiding to write most of the XHTML
attributes, then it is recommended to use this DTD.
Use with CSS (Cascading Style Sheets) if you want to
define how the document should look
A document conforming to this DTD is of the best
quality.
10
Example
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title> Strict DTD XHTML Example </title>
</head>
<body><p>
Please Choose a Day:<br /><br />
<select name="day">
<option selected="selected">Monday</option>
<option>Tuesday</option>
<option>Wednesday</option>
</select></p>
</body>
</html>
11
Transitional
Use with standard HTML and/or with CSS
Allows deprecated HTML elements
If you are planning to use many XHTML attributes
as well as few Cascading Style Sheet properties,
then you should adopt this DTD and you should
write your XHTML document accordingly.
12
Example
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head><title> Transitional DTD XHTML Example </title>
</head>
<body bgcolor="#FFFFFF" link="#000000" text="red">
<p>This is a transitional XHTML example</p>
</body>
13
</html>
Frameset
Use if your document uses HTML frames
You can use this when you want to use HTML Frames to
partition the browser window into two or more frames.
14
Example
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head><title> Frameset DTD XHTML Example </title></head>
<frameset cols="100,*">
<frame src="toc.html" />
<frame src="intro.html" name="content" />
</frameset>
</html>
15
