Lecture 2: XHTML
Ouissem Ben Fredj
Ouissem.BenFredj@gmail.com
http://lms.tu.edu.sa/
502261-3 – Web Systems
Taif University
College of Computers and Information Technology
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
● http://www.w3schools.com/xhtml/
● 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
The problem with HTML
● HTML started out as a way of 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 isn’t
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 XML is designed to describe data to
humans computers
Browsers are very tolerant of errors XML documents must be well-formed
in HTML (syntactically correct)
All browsers can display HTML All modern browsers display XML, but in
various ways
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 xmlns="http://www.w3.org/1999/xhtml">
<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 />, <img src="smile.gif" />
● Note: Some older browsers require a space before the /
From HTML to XHTML, II
● Attribute names must also be in lower case
● Example: <table width="100%">
● Attribute values must be quoted
● Example: <table width="100%">
● Attribute minimization is forbidden
● 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" />
DTDs
● 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
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">
● <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN”
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
● (Essentially the same as XHTML 1.0 Strict)
DOCTYPE declaration, II
● The main DTDs are as follows:
● 1.0 Strict
● Use for really clean markup, with no display information (no
font, color, or size information)
● Use with CSS (Cascading Style Sheets) if you want to define
how the document should look
● 1.0 Transitional
● Use with standard HTML and/or with CSS
● Allows deprecated HTML elements
● 1.0 Frameset
● Use if your document uses HTML frames
● 1.1
● Like 1.0 Strict, but with added support for Chinese
An XHTML Example
● <!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>
<title>A simple document</title>
</head>
<body>
<p>A simple paragraph.</p>
</body>
</html>
Extension
● A file containing an HTML page should have the
extension .html
● According to W3C, an XHTML page should have the
extension .xhtml
● However...
● I have had trouble getting JavaScript to work on pages with
this extension
● I recommend sticking with .html, at least for now
Tools
● Dave Raggett's HTML TIDY,
http://tidy.sourceforge.net/,
is a free UNIX tool for checking and cleaning up HTML
pages
● The W3C HTML Validation Tool
http://validator.w3.org/ is an HTML form for
checking (but not fixing) HTML and XHTML
documents
Vocabulary
● HTML: Hypertext Markup Language
● XHTML: eXtensible Hypertext Markup Language
● XML: eXtensible Markup Language
● DTD: Document Type Definition
