LESSON 9
XML & XHTML
Outline
• XML
• XHTML
XML - Introduction
• XML stands for eXtensible Markup Language.
• XML was designed to store and transport data.
• XML was designed to be both human- and machine-readable.
Difference Between XML and HTML
1. XML was designed to carry data - with focus on what data is while
HTML was designed to display data - with focus on how data looks
2. XML tags are not predefined like HTML tags are - The tags in the
example above (like <to> and <from>) are not defined in any XML
standard. These tags are "invented" by the author of the XML
document. HTML works with predefined tags like <p>, <h1>,
<table>, etc. With XML, the author must define both the tags and
the document structure.
XML Declaration
<?xml version="1.0" encoding="UTF-8" ?>
• Must be first line of the document
• Nothing can come before (not even whitespace)
• version attribute is required
• encoding is optional but widely used
XML Declaration
Examples
• Valid declarations:
<?xml version="1.0" ?>
<?xml version="1.0" encoding ="1.0" ?>
• Invalid declarations:
<xml version="1.0" ?>
<?xml version="1.0" >
<?XML version="1.0" ?>
<?xml version=1.0 ?>
XML Syntax Rules
• XML Documents Must Have a Root Element
• XML documents must contain one root element that is
the parent of all other elements:
• <root>
<child>
<subchild>.....</subchild>
</child>
</root>
XML Example
<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
All XML Elements Must Have a Closing
Tag
• In XML, it is illegal to omit the closing tag. All
elements must have a closing tag:
• <p>This is a paragraph.</p>
<br />
XML Tags are Case Sensitive
• XML tags are case sensitive. The tag <Letter> is
different from the tag <letter>.
• Opening and closing tags must be written with the
same case:
• <message>This is correct</message>
• "Opening and closing tags" are often referred to as
"Start and end tags". Use whatever you prefer. It is
exactly the same thing.
XML Elements Must be Properly Nested
• In HTML, you might see improperly nested elements:
• <b><i>This text is bold and italic</b></i>
• In XML, all elements must be properly nested within
each other:
• <b><i>This text is bold and italic</i></b>
XML Attribute Values Must Always be
Quoted
• XML elements can have attributes in name/value pairs
just like in HTML.
• In XML, the attribute values must always be quoted:
• <note date="12/11/2007">
<to>Tove</to>
<from>Jani</from>
</note>
XML Tree Structure
• XML documents form a tree structure that starts at "the root" and
branches to "the leaves"..
• XML documents are formed as element trees.
• An XML tree starts at a root element and branches from the root to child
elements.
• All elements can have sub elements (child elements):
• <root>
<child>
<subchild>.....</subchild>
</child>
</root>
XML Tree Structure
• QUESTIONS
XHTML
• XHTML stands for EXtensible HyperText Markup Language. It
is the next step in the evolution of the internet. The XHTML 1.0
is the first document type in the XHTML family.
• XHTML was developed by World Wide Web Consortium (W3C)
to help web developers make the transition from HTML to XML.
• By migrating to XHTML today, web developers can enter the
XML world with all of its benefits, while still remaining confident
in the backward and future compatibility of the content.
Why Use XHTML
1. XHTML documents are XML conforming as they are readily
viewed, edited, and validated with standard XML tools.
2. XHTML documents can be written to operate better than they
did before in existing browsers as well as in new browsers.
3. XHTML documents can utilize applications such as scripts
and applets that rely upon either the HTML Document Object
Model or the XML Document Object Model.
4. XHTML gives you a more consistent, well-structured format so
that your webpages can be easily parsed and processed by
present and future web browsers.
Why Use XHTML
5. You can easily maintain, edit, convert and format your
document in the long run.
6. Since XHTML is an official standard of the W3C, your website
becomes more compatible with many browsers and it is
rendered more accurately.
7. XHTML combines strength of HTML and XML. Also,
XHTML pages can be rendered by all XML enabled
browsers.
8. XHTML defines quality standard for your webpages and if
you follow that, then your web pages are counted as quality web
pages. The W3C certifies those pages with their quality stamp
Important difference with HTML
1. <!DOCTYPE> is mandatory
2. The xmlns attribute in <html> is mandatory
3. <html>, <head>, <title>, and <body> are mandatory
4. Elements must always be properly nested
5. Elements must always be closed
6. Elements must always be in lowercase
7. Attribute names must always be in lowercase
8. Attribute values must always be quoted
9. Attribute minimization is forbidden
DOCTYPE Declaration
• All XHTML documents must have a DOCTYPE declaration at
the start.
• There are three types of DOCTYPE declarations.
1. Strict
2. Transitional
3. Frameset
XHTML 1.0 Strict
• XHTML 1.0 Strict
• 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. A document conforming to this
DTD is of the best quality.
• If you want to use XHTML 1.0 Strict DTD then you need to
include the following line at the top of your XHTML document.
XHTML 1.0 Transitional
• 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.
• If you want to use XHTML 1.0 Transitional DTD, then you need
to include the following line at the top of your XHTML document.
XHTML 1.0 Frameset
• You can use this when you want to use HTML Frames to
partition the browser window into two or more frames.
• If you want to use XHTML 1.0 Frameset DTD, then you need to
include following line at the top of your XHTML document.
XHTML - Syntax
• XHTML - <!DOCTYPE ....> Is Mandatory
• An XHTML document must have an XHTML
<!DOCTYPE> declaration.
• The <html>, <head>, <title>, and <body> elements
must also be present, and the xmlns attribute in
<html> must specify the xml namespace for the
document.
Case Sensitivity
• XHTML is case sensitive markup language. All the XHTML tags and
attributes need to be written in lower case only.
<!-- This is invalid in XHTML -->
<A Href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</A>
<!-- Correct XHTML way of writing this is as follows -->
<a href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</a>
Closing the Tags
• Each and every XHTML tag should have an equivalent closing tag,
even empty elements should also have closing tags. Here is an
example showing valid and invalid ways of using tags −
<!-- This is invalid in XHTML -->
<p>This paragraph is not written according to XHTML syntax.
<!-- This is also invalid in XHTML -->
• <img src="/images/xhtml.gif" >
• The following syntax shows the correct way of writing above tags in
XHTML. Difference is that, here we have closed both the tags
properly.
<!-- This is valid in XHTML -->
<p>This paragraph is not written according to XHTML syntax.</p>
<!-- This is also valid now -->
<img src="/images/xhtml.gif" />
Attribute Quotes
• All the values of XHTML attributes must be quoted. Otherwise, your
XHTML document is assumed as an invalid document. Here is the
example showing syntax −
<!-- This is invalid in XHTML -->
<img src="/images/xhtml.gif" width=250 height=50 />
<!-- Correct XHTML way of writing this is as follows -->
<img src="/images/xhtml.gif" width="250" height="50" />
Attribute Minimization
• XHTML does not allow attribute minimization. It means you need to
explicitly state the attribute and its value. The following example shows the
difference −
<!-- This is invalid in XHTML -->
<option selected>
<!-- Correct XHTML way of writing this is as follows -->
<option selected="selected">
• Read more on : list of the minimized attributes in HTML and the way
you need to write them in XHTML
Nested Tags
• You must nest all the XHTML tags properly. Otherwise your document
is assumed as an incorrect XHTML document. The following example
shows the syntax −
<!-- This is invalid in XHTML -->
<b><i> This text is bold and italic</b></i>
<!-- Correct XHTML way of writing this is as follows -->
<b><i> This text is bold and italic</i></b>
XHTML EXAMPLE
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of document</title>
</head>
<body>
some content here...
</body>
</html>
QUESTIONS?
