Scribd
Upload
62 views

Internet Programming UNIT-1 Introduction To XHTML: What You Should Already Know

XHTML is a stricter version of HTML that incorporates XML syntax rules. It is almost identical to HTML but requires elements to be properly nested, closed, and in lowercase. The document discusses the differences between XHTML and HTML, including required elements and doctypes. It provides examples of correct XHTML syntax and outlines the steps taken to convert an existing website from HTML to XHTML, such as adding the required DOCTYPE and xmlns attributes, making all tags and attributes lowercase, and quoting attribute values.

Uploaded by

Deepak Kumar Prajapat
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
62 views

Internet Programming UNIT-1 Introduction To XHTML: What You Should Already Know

XHTML is a stricter version of HTML that incorporates XML syntax rules. It is almost identical to HTML but requires elements to be properly nested, closed, and in lowercase. The document discusses the differences between XHTML and HTML, including required elements and doctypes. It provides examples of correct XHTML syntax and outlines the steps taken to convert an existing website from HTML to XHTML, such as adding the required DOCTYPE and xmlns attributes, making all tags and attributes lowercase, and quoting attribute values.

Uploaded by

Deepak Kumar Prajapat
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 14

Internet Programming UNIT-1 Introduction to XHTML

XHTML is a stricter and cleaner version of HTML.

What You Should Already Know


Before you continue you should have a basic understanding of the following: HTML and the basics of building web pages

What Is XHTML?
XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to HTML 4.01 XHTML is a stricter and cleaner version of HTML XHTML is HTML defined as an XML application XHTML is a W3C Recommendation

XHTML is a W3C Recommendation


XHTML 1.0 became a W3C Recommendation January 26, 2000.

All Browsers Support XHTML


XHTML is compatible with HTML 4.01. All browsers support XHTML.

XHTML - Why?
XHTML is a combination of HTML and XML (EXtensible Markup Language). XHTML consists of all the elements in HTML 4.01, combined with the strict syntax of XML. Many pages on the internet contain "bad" HTML. The following HTML code will work just fine if you view it in a browser (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> XML is a markup language where everything must be marked up correctly, which results in "wellformed" documents. XML is designed to describe data, and HTML is designed to display data.

Prepared By: Deepak Kumar Prajapat Lecturer: CS/IT Department VCET, Bundi

Internet Programming UNIT-1


Today's market consists of different browser technologies, some browsers run on computers, and some browsers run on mobile phones or other small devices. The last-mentioned do not have the resources or power to interpret a "bad" markup language. Therefore - by combining the strengths of HTML and XML, W3C recommended a markup language that is useful now and in the future - XHTML.

Differences Between XHTML And HTML Get Ready For XHTML


XHTML is not very different from the HTML 4.01 standard. So, bringing your code up to the 4.01 standard is a good start. In addition, you should start NOW to write your HTML code in lowercase letters, and NEVER skip closing tags (like </p>).

The Most Important Differences:


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

XHTML Elements Must Be Properly Nested


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> Note: A common mistake with nested lists, is to forget that the inside list must be within <li> and </li> tags. This is wrong: <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> <li>Milk</li> Prepared By: Deepak Kumar Prajapat Lecturer: CS/IT Department VCET, Bundi

Internet Programming UNIT-1


</ul> This is correct: <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> Notice that we have inserted a </li> tag after the </ul> tag in the "correct" code example.

XHTML Elements Must Always Be Closed


Non-empty elements must have a closing tag. 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>

Empty Elements Must Also Be Closed


Empty elements must also 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" />

Prepared By: Deepak Kumar Prajapat Lecturer: CS/IT Department VCET, Bundi

Internet Programming UNIT-1 XHTML Elements Must Be In Lower Case


Tag names and attributes must 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>

XHTML Documents Must Have One Root Element


All XHTML elements must be nested within the <html> root element. Child elements must be in pairs and correctly nested within their parent element. The basic document structure is: <html> <head> ... </head> <body> ... </body> </html>

XHTML Syntax
More XHTML Syntax Rules

Attribute names must be in lower case Attribute values must be quoted Attribute minimization is forbidden The XHTML DTD defines mandatory elements

Attribute Names Must Be In Lower Case


This is wrong: <table WIDTH="100%"> This is correct: Prepared By: Deepak Kumar Prajapat Lecturer: CS/IT Department VCET, Bundi

Internet Programming UNIT-1


<table width="100%">

Attribute Values Must Be Quoted


This is wrong: <table width=100%> This is correct: <table width="100%">

Attribute Minimization Is Forbidden


This is wrong: <input checked> <input readonly> <input disabled> <option selected> <frame noresize> This is correct: <input checked="checked" /> <input readonly="readonly" /> <input disabled="disabled" /> <option selected="selected" /> <frame noresize="noresize" /> Here is a list of the minimized attributes in HTML and how they should be written in XHTML: HTML compact checked declare readonly disabled selected defer ismap XHTML compact="compact" checked="checked" declare="declare" readonly="readonly" disabled="disabled" selected="selected" defer="defer" ismap="ismap" Prepared By: Deepak Kumar Prajapat Lecturer: CS/IT Department VCET, Bundi

Internet Programming UNIT-1


nohref noshade nowrap multiple noresize nohref="nohref" noshade="noshade" nowrap="nowrap" multiple="multiple" noresize="noresize"

The Lang Attribute


The lang attribute applies to almost every XHTML element. It specifies the language of the content within an element. If you use the lang attribute in an element, you must also add the xml:lang attribute, like this: <div lang="it" xml:lang="it">Ciao bella!</div>

Mandatory XHTML Elements


An XHTML document must have a DOCTYPE declaration. The html, head, title, and body elements must also be present.

XHTML Doctypes
<!DOCTYPE> Is Mandatory
An XHTML document consists of three main parts:

the DOCTYPE declaration the <head> section the <body> section

The basic document structure is: <!DOCTYPE ...> <html> <head> <title>... </title> </head> <body> ... </body> Prepared By: Deepak Kumar Prajapat Lecturer: CS/IT Department VCET, Bundi

Internet Programming UNIT-1


</html> Note: The <!DOCTYPE> declaration refers to a Document Type Definition (DTD). A DTD specifies the rules for the markup language, so that the browsers render the content correctly.

Prepared By: Deepak Kumar Prajapat Lecturer: CS/IT Department VCET, Bundi

Internet Programming UNIT-1 An XHTML Example


The example below shows an XHTML document with a minimum of required tags: <!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> </body> </html> Note: The xmlns attribute in <html>, specifies the xml namespace for a document, and is required in XHTML documents.

XHTML Different Doctypes


The <!DOCTYPE> declaration is the very first thing in an XHTML document, before the <html> tag. The <!DOCTYPE> declaration is not an XHTML tag; it is an instruction to the web browser about what version of the markup language the page is written in. The <!DOCTYPE> declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers render the content correctly.

XHTML 1.0 Strict


This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Prepared By: Deepak Kumar Prajapat Lecturer: CS/IT Department VCET, Bundi

Internet Programming UNIT-1


XHTML 1.0 Transitional
This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset


This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset content. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1
This DTD is equal to XHTML 1.0 Strict, but allows you to add modules (for example to provide ruby support for East-Asian languages). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML HowTo
How W3Schools Was Converted To XHTML
W3Schools was converted from HTML to XHTML in December 1999, by Hege Refsnes and Stle Refsnes. To convert a Web site from HTML to XHTML, you should be familiar with the XHTML syntax rules described in the previous chapters. The following steps were executed (in the order listed below):

A <!DOCTYPE> Was Added


The following <!DOCTYPE> was added to the first line of every page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Prepared By: Deepak Kumar Prajapat Lecturer: CS/IT Department VCET, Bundi

Internet Programming UNIT-1


Tip: Your pages must have a DOCTYPE declaration if you want them to validate as correct XHTML.

The xmlns Attribute Was Added


The xmlns attribute was added to the html element of every page: <html xmlns="http://www.w3.org/1999/xhtml"> Note: The xmlns attribute specifies the xml namespace for a document, and is required in XHTML documents.

Lowercase Tags And Attribute Names


A general "find-and-replace" function was executed to replace all uppercase tags with lowercase tags. The same was done for attribute names.

All Attribute Values Were Quoted


Every page in W3Schools.com was checked to see that attribute values were quoted.

Empty Tags Were Properly Closed


Empty tags are not allowed in XHTML. The <hr> and <br> tags should be replaced with <hr /> and <br />. A general "find-and-replace" function was executed to swap the tags. We decided not to close the <img> tags with </img>, but with /> at the end of the tag. This was done manually.

W3Schools Was Validated Against The W3C Validator


Finally, all our pages were validated against the official W3C DTD Validator: W3C XHTML Validator. A few more errors were found and edited manually. The most common error was missing </li> tags in lists.

Prepared By: Deepak Kumar Prajapat Lecturer: CS/IT Department VCET, Bundi

Internet Programming UNIT-1

XHTML Validation
An XHTML document can be validated with W3C's validator.

Validate An XHTML Document


Before an XHTML file can be validated, a correct DTD must be added as the first line of the file.

XHTML 1.0 Strict


This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional


This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset


This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset content. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1
This DTD is equal to XHTML 1.0 Strict, but allows you to add modules (for example to provide ruby support for East-Asian languages). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Prepared By: Deepak Kumar Prajapat Lecturer: CS/IT Department VCET, Bundi

Internet Programming UNIT-1 Validate Your XHTML With The W3C Validator
Input a web address in the box below:

Validate the page

XHTML Modularization
The XHTML modularization-model defines the modules of XHTML.

Why XHTML Modularization?


XHTML contains most of the functionality a web developer will need. For some purposes XHTML is too large and complex, and for other purposes it's too simple. By splitting XHTML into modules, the W3C (World Wide web Consortium) has created small and well-defined sets of XHTML elements that can be used separately for small devices, or combined with other XML standards in more complex applications. With modular XHTML, designers can:

Choose the elements to be supported by a device Simplify XHTML for small devices Extend XHTML for complex applications by adding new XML functionality (like MathML, SVG, Voice and Multimedia) Define XHTML profiles like XHTML Basic (a subset of XHTML for mobile devices)

XHTML Modules
W3C has split the definition of XHTML into 28 modules: Module name Applet Module Base Module Basic Forms Module Basic Tables Module Description Defines the deprecated* applet element Defines the base element Defines the basic forms elements Defines the basic table elements Prepared By: Deepak Kumar Prajapat Lecturer: CS/IT Department VCET, Bundi

Internet Programming UNIT-1


Bi-directional Text Module Client Image Map Module Edit Module Forms Module Frames Module Hypertext Module Iframe Module Image Module Intrinsic Events Module Legacy Module Link Module List Module Metainformation Module Name Identification Module Object Module Presentation Module Scripting Module Server Image Map Module Structure Module Style Attribute Module Style Sheet Module Tables Module Target Module Text Module Defines the bdo element Defines browser side image map elements Defines the editing elements del and ins Defines all elements used in forms Defines the frameset elements Defines the a element Defines the iframe element Defines the img element Defines event attributes like onblur and onchange Defines deprecated* elements and attributes Defines the link element Defines the list elements ol, li, ul, dd, dt, and dl Defines the meta element Defines the deprecated* name attribute Defines the object and param elements Defines presentation elements like b and i Defines the script and noscript elements Defines server side image map elements Defines the elements html, head, title and body Defines the style attribute Defines the style element Defines the elements used in tables Defines the target attribute Defines text container elements like p and h1

* Deprecated elements should not be used in XHTML.

You Have Learned XHTML, Now What?


XHTML Summary
This tutorial has taught you how to create stricter and cleaner HTML pages. You have learned that all XHTML elements must be properly nested, XHTML documents must be well-formed, all tag names must be in lowercase, and that all XHTML elements must be closed. You have also learned that all XHTML documents must have a <!DOCTYPE> declaration, and that the html, head, title, and body elements must be present.

Prepared By: Deepak Kumar Prajapat Lecturer: CS/IT Department VCET, Bundi

Internet Programming UNIT-1

Prepared By: Deepak Kumar Prajapat Lecturer: CS/IT Department VCET, Bundi

You might also like