Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
21 views

Lecture 8 HTML and XHTLM

XHTML is a stricter version of HTML that is defined as an XML application. It combines the strengths of HTML and XML by requiring documents to be marked up correctly and elements to be properly nested. The key differences from HTML are that XHTML documents must have an XHTML DOCTYPE declaration, elements must be in lowercase, attributes must be in lowercase and quoted, and empty elements like <br> must be closed with a slash. Converting HTML to XHTML involves adding an XHTML doctype, xmlns attribute, closing empty elements, and following these stricter formatting rules.

Uploaded by

theayloe
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
21 views

Lecture 8 HTML and XHTLM

XHTML is a stricter version of HTML that is defined as an XML application. It combines the strengths of HTML and XML by requiring documents to be marked up correctly and elements to be properly nested. The key differences from HTML are that XHTML documents must have an XHTML DOCTYPE declaration, elements must be in lowercase, attributes must be in lowercase and quoted, and empty elements like <br> must be closed with a slash. Converting HTML to XHTML involves adding an XHTML doctype, xmlns attribute, closing empty elements, and following these stricter formatting rules.

Uploaded by

theayloe
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 18

HTML and XHTLM

What is XHTML?
• XHTML stands for
EXtensible HyperText Markup Language
• XHTML is almost identical to HTML
• XHTML is stricter than HTML
• XHTML is HTML defined as an XML application
• XHTML is supported by all major browsers
What is XML
• XML (eXtensible Markup Language):
– is a set of rules that lets web designers classify
their data in a way customized to their needs.
– Extendable by creating new types of tags.
Why XHTML?
• Many pages on the internet contain "bad" HTML.
• This HTML code works fine in most browsers
(even if it does not follow the HTML rules):
<html>
<head>
<title>This is bad HTML</title>
<body>
<h1>Bad HTML
<p>This is a paragraph
</body>
Why XHTML? Cont…
• Today's market consists of different browser
technologies.
• Some browsers run on computers, and some
browsers run on mobile phones or other small
devices.
• Smaller devices often lack the resources or power
to interpret "bad" markup.
• XML is a markup language where documents must
be marked up correctly (be "well-formed").
• By combining the strengths of HTML and XML,
XHTML was developed.
• XHTML is HTML redesigned as XML.
The Most Important Differences from
HTML:
• Document Structure
– XHTML DOCTYPE is mandatory
– The xmlns attribute in <html> is mandatory
– <html>, <head>, <title>, and <body>
are 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.
Structure of an XHTML doc
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional
.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of document</title>
</head>
<body>
some content
</body>
</html>
The Most Important Differences from
HTML:
• XHTML Elements
– XHTML elements must be properly nested
– XHTML elements must always be closed
– XHTML elements must be in lowercase
– XHTML documents must have one root element
Nesting of elements
• In HTML, some elements can be
improperly nested within each other, like
this:

<b><i>This text is bold and italic</b></i>

• In XHTML, all elements must be properly


nested within each other, like this:

<b><i>This text is bold and italic</i></b>


XHTML elements must always be
closed
This is wrong:
<p>This is a paragraph
<p>This is another paragraph
This is correct:
<p>This is a paragraph</p>
<p>This is another paragraph</p>
XHTML empty elements must always
be closed
This is wrong:
A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy
face">

This is correct:
A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy
face" />
XHTML elements must always be in
lower case
This is wrong:
<BODY>
<P>This is a paragraph</P>
</BODY>
This is correct:
<body>
<p>This is a paragraph</p>
</body>
The Most Important Differences from
HTML:
• XHTML Attributes
– Attribute names must be in lower case
– Attribute values must be quoted
– Attribute minimization is forbidden
XHTML attribute names must always
be in lower case
This is wrong:
<table WIDTH="100%">

This is correct:
<table width="100%">
XHTML attribute values must be
quoted
This is wrong:
<table width=100%>

This is correct:
<table width="100%">
Attribute minimization not allowed in
XHTML
Wrong:
<input type="checkbox" name="vehicle" value="car" checked />
Correct:
<input type="checkbox" name="vehicle" value="car" checked="c
hecked" />

Wrong:
<input type="text" name="lastname" disable
d />
Correct:
<input type="text" name="lastname" disabled="disabled" />
How to Convert from HTML to XHTML
1. Add an XHTML <!DOCTYPE> to the first line
of every page
2. Add an xmlns attribute to the html element
of every page
3. Change all element names to lowercase
4. Close all empty elements
5. Change all attribute names to lowercase
6. Quote all attribute values

You might also like