Scribd
Upload
23 views

2.1 - The Overview and Comparation of HTML and XHTML

The document provides an overview of the differences between HTML and XHTML. It discusses that XHTML is a stricter version of HTML that combines HTML and XML. It requires elements to be properly nested, closed, and in lowercase. XHTML documents must also have a single root element and follow XML syntax rules. The document outlines these syntax rules and provides examples to illustrate the differences between HTML and XHTML markup.

Uploaded by

abdul hasib
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
23 views

2.1 - The Overview and Comparation of HTML and XHTML

The document provides an overview of the differences between HTML and XHTML. It discusses that XHTML is a stricter version of HTML that combines HTML and XML. It requires elements to be properly nested, closed, and in lowercase. XHTML documents must also have a single root element and follow XML syntax rules. The document outlines these syntax rules and provides examples to illustrate the differences between HTML and XHTML markup.

Uploaded by

abdul hasib
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 33

The Overview and Comparation

of HTML and XHTML


HTML
Example
<html>
<body>

<h1>My F i r s t Heading</h1>
<p>My f i r s t paragraph.</p>

</body>
</html>
What i s
HTML?
HTML i s a language f o r
describing web pages.
• HTML stands f o r Hyper
Text Markup Language
• HTML i s not a
programming language,
i t is a markup
language
• A markup language i s a set
of markup tags
• HTML usesmarkup tags
to describe web
pages
What i s
XHTML
• XHTML stands f o r
EXt ensible HyperText
Markup Language
• XHTML i s almost i dentical
to HTML 4.01
• XHTML i s as t r i c t e r and
cleaner version of HTML
• XHTML i s HTML defined as an
XML application
• XHTML i s a W3C
Recommendation
• XHTML i s compatible
with HTML 4.01.
• All new browsers
have support f o r
XHTML.
Why
XHTML?
• XHTML i s a combination o f HTML
and XML (EXtensible Markup
Language).
• XHTML c o n s i st s o f a l l the
elements i n HTML 4.01
combinedwith the syntax of
XML.
• We have reached a point where
many pages on the WWW
contain "bad" HTML.
• The following HTML code w i l l
work f i n e i f you view it
in a browser, even i f i t does
Continue...
<html>
<head>
<title>This i s bad HTML</title>
<body>
<h1>Bad HTML
</body>

Bad html b-xhtml f-xhtml


Continue...
• XML i s amarkup language where
everything has t o be marked
up c o r r e c t l y, which r e s u l t s i n
"well-formed" documents.
• XML was designedto describe data and
HTML was designedt o display d a t a .
• Today's market co n si s ts of d i ff e r e n t
browser technologies, some browsersrun
I n t e r n e t on computers,andsome browsers run
I n t e r n e t on mobile phones or other
small devices. The last-mentioned do not
have the resources or powert o i n t e r p r e t
a "bad" markup language.
• Therefore - by combiningHTML andXML,
and t h e i r s t r e n g t h s , we got a markup
language t h a t i s useful now and i n the fut ure -
XHTML.
XHTML Syntax
Some XHTML Syntax Rules
• Att ribute names must be i n
l ower case
• Att ribute values must be
quoted
• Att ribute minimization
i s forbidden
• The i d a t t r i b u t e replaces
the name attribute
• The XHTML DTD defines
mandatory elements
XHTML Syntax
At t r i bu t e Names Must Be In Lower Case

This i s wrong:
<table WIDTH="100%">

This i s c o r r e c t :
<table width="100%">
XHTML Syntax
At t r i bu t e Values Must Be Quoted

This i s wrong:
<table width=100%>

This i s c o r r e c t :
<table width="100%">
XHTML Syntax
At t ri b ut e Minimization I s Forbidden
This i s wrong:
<input checked>
<input disabled>
<option selected>
This i s c o r r e c t :
<input
checked="checked"
/>
<input
disabled="disable
d" />
XHTML Syntax
The i d At t ri b ut e Replaces
The name At t r i bu t e
HTML 4.01 defines a
name a t t r i b u t e f o r the
elements a , a p p l e t ,
frame, iframe, img, and
map. In XHTML the name
attribute is
deprecated. Use id
instead.
Continue...
This i s wrong:
<img s r c = " p i c t u r e . g i f " name="picture1" />
This i s c o r r e c t :
<img s r c = " p i c t u r e . g i f " id="picture1" />
Note: To i nt e r op e r a t e with older
browsers for a while, you should use
both name andi d , with i d e n t i c a l
attribute val ues, l i k e t h i s :
<img s r c = " p i c t u r e . g i f "
id="picture1" name="picture1" />
IMPORTANT Compatibility Note:
To make your XHTML compatible with
t oda y's browsers, you shouldaddan
extra space beforethe "/" symbol.
XHTML Syntax
Mandatory XHTML Elements
All XHTML documentsmust have a
DOCTYPE d e c l a r a t i o n . The html, head
and body elements must
be p r e s e n t , and the t i t l e must
be present i ns i de the head
element.

Note: The DOCTYPE declaration i s


not a p a r t of the XHTML
document i t s e l f .
It i s not an XHTML element, and
i t should not have a
Continue...
This i s a minimum XHTML document template:
<!DOCTYPE Doctype goes here>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
< t i t l e > Ti t l e goes h e r e < / t i t l e >
</head>

<body>
</body>

</html>
XHTML
DTD
<!DOCTYPE> I s Mandatory
An XHTML document
consists of t h r e e main
parts:
* the DOCTYPE
declaration
* the <head>
section
* the <body>
section
Continue...
The basic document s t r u c t u r e i s :
<!DOCTYPE . . . >
<html>
<head>
<title>... </title>
</head>
<body> . . . </body>
</html>
Continue...
This i s a simple (minimal) XHTML document:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html>
<head>
<title>simple document</title>
</head>
<body>
<p>a simple paragraph</p> e1
</body>
</html>
Continue...
Document Type Definitions (DTD)
*A DTD s p e c i f i e s the syntax of a
web pagei n SGML
*DTDs areused by SGML applications,
suchas HTML, t o specify r u l e s f o r
documents of a p a r t i c u l a r ty p e ,
including a s e t of elements and
e n t i t y declar ations
*An XHTML DTD describes i n
p r e c i s e , computer-readable language,
theallowed syntax of
XHTML markup
There are thr ee XHTML DTDs:
*STRICT
*TRANSITIONAL
*FRAMESET
Continue...
• XHTML 1.0 S t r i c t
• <!DOCTYPE html
• PUBLIC "-//W3C//DTD XHTML
1.0 Strict//EN"
• "http://www.w3.org/TR/xhtml1/D
TD
/ xh t m l 1- s t ri c t .dt d" >
• Use the s t r i c t DOCTYPE when
you want really clean
markup, f r e e of prese nt at i onal
c l u t t e r. Use together
with CSS.
Continue...
• XHTML 1.0 Transit ional
• <!DOCTYPE html
• PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN"
• "http://www.w3.org/TR/xhtml1/D
TD
/xht m l 1-t ransit i onal .dt d">
• Use the t r a n s i t i o n a l DOCTYPE
when you want to
s t i l l use HTML's
pres ent at i onal f e a t u r e s .
Continue...
• XHTML 1.0 Frameset
• <!DOCTYPE html
• PUBLIC "-//W3C//DTD XHTML
1.0 Frameset//EN"
• "http://www.w3.org/TR/xhtml1/D
TD
/xhtml1-frameset.dtd">
• Use the frameset DOCTYPE
when youwantt o useHTML
Frames to s p l i t the web
page i n t o two or more
frames.
XHTML vs
HTML
• You canprepare yourself
for XHTML by starting
t o write s t r i c t HTML.
• HTML i s the
antecedent technology
to XHTML
XHTML vs
HTML
The Most Important Differences:
• XHTML elements must be
properly nested
• XHTML elements must always be
closed
• XHTML elements must be i n
lowercase
• XHTML documents must have one
root element
XHTML vs
HTML
XHTML Elements Must Be Properly
Nested In HTML, some elements canbe
improperly nested withineach o t h e r, l i k e
this:
<b><i>This t e x t i s bold and i t a l i c </ b>< / i >

In XHTML, all elements must


be properly nested withineach
o t h e r, like this:
<b><i>This t e x t i s bold and i t a l i c </
i > < / b>
XHTML vs
HTML
This i s wrong:
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black
<li>Green
tea</li> </ul>
tea</li>
<li>Milk</li>
</ul>
XHTML vs
HTML
This i s c o r r e c t :
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black
tea</li>
<li>Green
tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
XHTML vs
HTML
XHTML Elements Must Always Be Closed
Non-empty elements must have an end t a g .
This i s wrong:
<p>This i s a paragraph
<p>This i s another paragraph
This i s c o r r e c t :
<p>This i s a paragraph</p>
<p>This i s another
paragraph</p>
XHTML vs
•HTML Elements
Empt Must Also Be Closed
y
• Empt elements must e i t h e r have an end tag or
y the
start tag end with / > .
A break: <br>
must
AThis
horizontal
is wrong:r u l e : <hr>
An image: <img src="happy.gif" alt="Happy face">
This i s c o r r e c t :
A break: <br />
A horizontal r u l e : <hr />
An image: <img src="happy.gif" alt="Happy face"
/>
XHTML vs
HXTHML
TML Elements Must Be In Lower
Case
The XHTMLs p e c i f i c a t i o n defines t h a t t he tag names and
a t t r i b u t e s need t o be lower case .

This i s wrong:
<BODY>
<P>This i s a paragraph</P>
</BODY>
This i s correct:
<body>
<p>This i s a paragraph</p>
</body>
XHTML vs
HTML
XHTML Documents Must Have One Root Element
Al l XHTML el ement s mus t be nes t ed
wi t hi n t he <ht ml > r oot element. All other
elements can have sub ( c h il d r e n )
elements. Sub elements must be i n
p a i r s and c o r r e c tl y nested within their
parent element. The basic document s t r u c t u r e
is:
<html>
<head> . . . </head>
<body> . . . </body>
</html>
Thank You! 

You might also like