Chapter 2
Introduction to XHTML
Part 1 of 2
pejal71@gmail.com
Objectives
By the end of this chapter, students will be able to
identify
important components of XHTML
document
use XHTML tags to create web page
2 of 17
Agenda
Whatis XHTML?
XHTML is a Web Standard
Why XHTML?
XHTML vs. HTML
XHTML syntax (intro - part 1)
3 of 17
What is XHTML?
stands for EXtensible Hypertext Markup
Language
aimed to replace HTML
almost identical to HTML 4.01
stricter and cleaner version of HTML
4 of 17
XHTML is a Web standard
XHTML 1.0 became an official W3C
Recommendation on January 26, 2000
XHTML 1.1 May 31st 2001
XHTML 5 28 October 2014
the specification is stable
has been reviewed by the W3C membership
the specification is now a Web standard
5 of 17
Why XHTML?
<html>
<head>
<title>This is bad HTML </title>
<body>
<h1>Bad HTML
</body>
thecode above works fine if you view in a web
browser , even it does not follow the HTML rules
6 of 17
Why XHTML?
we need a "well-formed" document. why?
different browser technologies
some browsers run on computers, some
browsers run on mobile phones and some on
palm pilots (do you know this?)
problem in interpreting a "bad" markup
language
7 of 17
Differences between XHTML & HTML?
XHTML elements must be properly nested
XHTML documents must be well-formed
tag names must be in lowercase
all XHTML elements must be closed
8 of 17
XHTML Documents must be
properly nested
inHTML, some elements can be improperly
nested within each other like this:
<b><i>This text is bold and italic </b></i>
inXHTML, ALL elements must be properly
nested within each other like this:
<b><i>This text is bold and italic </i></b>
9 of 17
XHTML Documents must be
well-formed
must be nested within the <html> root element
all other elements can have sub (children)
elements
sub elements must be in pairs and correctly nested
within their parent elements.
below is the basic document structure:
<html>
<head>. . . </head>
<body>. . . </body>
</html>
10 of 17
Tag Names Must Be in Lower Case
XHTML documents are XML applications
XML is case-sensitive
tags like <br> and <BR> are interpreted as
different tags
This is Wrong This is Correct
<BODY> <body>
<P>This is a <p>This is a
paragraph </P> paragraph</p>
</BODY> </body>
11 of 17
ALL XHTML Elements
Must Be Closed
non-empty elements must have an end tag
empty elements must also be closed
This is Wrong This is Correct
<p>This is a <p>This is a
paragraph paragraph
</p>
This is a break <br> This is a break
<br />
12 of 17
XHTML Basic Syntax
an XHTML documents consists of 3 main parts
1. the DOCTYPE
2. the head
3. the body
the basic document structure is:
<?xml . . . >
<!DOCTYPE . . . >
<html>
<head> <title>... </title> </head>
<body> ... </body>
</html>
13 of 17
XHTML Basic Syntax
theDOCTYPE declaration should always be in the
second line after XML declaration.
<html> tag is a must
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
an XHTML example (minimal)
14 of 17
XHTML <!DOCTYPE>
the <!DOCTYPE> is mandatory. There are currently
3 XHTML document types:
STRICT - when you want really clean markup, free of
presentational clutter. normally use this together with
Cascading Style Sheet(CSS)
TRANSITIONAL - when you want to take advantage of
HTML's presentational features and when you want to
support browsers that don't understand CSS
FRAMESET - when you want to use frames to partition
the browser window into two or more frames set
15 of 17
More XHTML Tags:
comment ...
more tags in the
header next class
paragraph homework: write an
break
XHTML document
about yourself. you
horizontal bar can include your
bold, italic, font photo, strengths,
list weaknesses, email
link address etc. save your
images
document as
your_id.html
16 of 17
Resources
XHTML Tutorial
http://www.w3schools.com/tags/default.asp
The W3C Markup Validaton Service
http://validator.w3.org/
17 of 17
