Why XHTML?: Your Webpages Can Be Easily Parsed and Processed by Present and Future Web Browsers

Why XHTML?
XHTML has stricter syntax rules in comparison to HTML. 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. You can easily maintain, edit, convert
and format your document in the long run.
Since XHTML is an official standard of the World Wide Web Consortium (W3C), your
website becomes more compatible with many browsers and it is rendered more
accurately. XHTML combines strength of HTML and XML. Also, XHTML pages can be
rendered by all XML enabled browsers.
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.
Web developers and web browser designers are constantly discovering new ways to
express their ideas through new markup languages. In XML, it is relatively easy to
introduce new elements or additional element attributes. The XHTML family is
designed to accommodate these extensions through XHTML modules and techniques
for developing new XHTML-conforming modules. These modules permit the
combination of existing and new features at the time of developing content and
designing new user agents.

XHTML syntax is very similar to HTML syntax and almost all the valid HTML elements
are valid in XHTML as well. But when you write an XHTML document you need to pay a
bit extra attention to make your HTML document compliant to XHTML.

Important Differences from HTML:
Document Structure
XHTML DOCTYPE is mandatory
The xmlns attribute in <html> is mandatory
<html>, <head>, <title>, and <body> are mandatory
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
XHTML Attributes
Attribute names must be in lower case
Attribute values must be quoted
Attribute minimization is forbidden

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>

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>

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>

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" />

XHTML Elements 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 Attribute Names Must Be In Lower Case
This is wrong:
<table WIDTH="100%">
This is correct:
<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>
This is correct:
<input checked="checked">
<input readonly="readonly">
<input disabled="disabled">
<option selected="selected">

The id attribute
The id attribute replaces the name attribute. Instead of using name="name", XHTML
prefers to use id="id". The following example shows this difference:

<img src="/images/xhtml.gif" name="xhtml_logo" />


<img src="/images/xhtml.gif" id="xhtml_logo" />

The language attribute
The language attribute of the script tag is deprecated. The following example shows
this difference:

<script language="JavaScript" type="text/JavaScript">
document.write("Hello XHTML!");
</script>


<script type="text/JavaScript">
document.write("Hello XHTML!");
</script>

Element prohibitions
The following elements are not allowed to have any other element inside them. This
prohibition applies to all depths of nesting, i.e. it includes all the descendant elements.
Element Prohibition
<a> Must not contain other <a> elements.
<pre> Must not contain the <img>, <object>, <big>, <small>, <sub>, or <sup>
elements.
<button> Must not contain the <input>, <select>, <textarea>, <label>, <button>,
<form>, <fieldset>, <iframe> or <isindex> elements.
<label> Must not contain other <label> elements.
<form> Must not contain other <form> elements.

Script and style elements
In XHTML, the script and style elements should not have < and & characters directly, if
they exist; then they are treated as the start of markup. The entities such as < and &
are recognized as entity references by the XML processor for displaying < and &
characters respectively.
Wrapping the content of the script or style element within a CDATA marked section
avoids the expansion of these entities.
<script type="text/JavaScript">
<![CDATA[
... unescaped VB or Java Script here... ...
]]>
</script>
An alternative is to use external script and style documents.

Embedded style sheets and scripts
Use external style sheets if your style sheet uses < or & or ]]> or --.
Use external scripts if your script uses < or & or ]]> or --.
Entity references as hex values
HTML and XML both permit references to characters by using hexadecimal value. In
HTML these references could be made using either &#Xnn; or &#xnn; and they are
valid but in XHTML documents, you must use the lower-case version only such
as &#xnn;.
Ampersand(URL):
Ampersand characters are frequently used in page addresses to carry variables, like
in PHP. When coding these addresses into your XHTML, you must escape them using
the entity value &. They'll be displayed as ampersand characters (&) on screen, of
course.
<a href="reviews.php?page=27&style=blue">link</a>
becomes
<a href="reviews.php?page=27&style=blue">link</a>
There are few XHTML/HTML attributes which are standard and associated to all the
XHTML/HTML tags. These attributes are listed here with brief description:
Core attributes
Not valid in base, head, html, meta, param, script, style, and title elements.
Attribute Value Description
class class_rule or style_rule The class of the element
Id id_name A unique id for the element
style style_definition An inline style definition
Title tooltip_text A text to display in a mouse tip
Language attributes
The lang attribute indicates the language being used for the enclosed content. The
language is identified using the ISO standard language abbreviations, such as fr for
French, en for English, and so on. RFC 1766 (http://www.ietf.org/rfc/rfc1766.txt)
describes these codes and their formats.
Not valid in base, br, frame, frameset, hr, iframe, param, and script elements.
Attribute value Description
dir ltr | rtl Sets the text direction
lang language_code Sets the language code
Microsoft proprietary attributes
Microsoft introduced a number of new proprietary attributes with the Internet Explorer 4
and higher versions.
Attribute value Description
accesskey character Sets a keyboard shortcut to access an element
language string This attribute specifies the scripting language to be
used with an associated script bound to the element,
typically through an event handler attribute. Possible
values might include JavaScript, jscript, vbs, and
VBScript.
tabindex number Sets the tab order of an element
contenteditable boolean Allows users to edit content rendered in Internet
Explorer 5.5 or greater. Possible values are true or
false.
disabled boolean Elements with the disabled attribute set may appear
faded and will not respond to user input. Possible
values are true or false.
hidefocus on or off This proprietary attribute, introduced with Internet
Explorer 5.5, hides focus on an element's content.
Focus must be applied to the element using the
tabindex attribute.
unselectable on or off Used to prevent content displayed in Internet
Explorer 5.5 from being selected.

DOCTYPES:
The XHTML standard defines three Document Type Definitions. The most commonly
used and easy one is the XHTML Transitional document.
XHTML 1.0 document type definitions correspond to three DTDs:
Strict
Transitional
Frameset

There are few XHTML elements and attributes which are available in one DTD but not
available in another DTD. Therefore, while writing your XHTML document, you must
select your XHTML elements or attributes carefully. However, XHTML validator helps
you to identify valid and invalid elements and attributes.
Every XHTML document is validated against a Document Type Definition. Before
validating an XHTML file properly, a correct DTD must be added as the first or second
line of the file.
Once you are ready to validate your XHTML document, you can use W3C Validator to
validate your document. This tool is very handy and helps you to fix the problems with
your document. This tool does not require any expertise to perform validation.
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.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
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.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Note : No matter what DTD you are using to write your XHTML document, if it is a
valid XHTML document; then your document will be considered as a good quality
document.

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
7. Designate client-side script code and style sheet code as CDATA sections.
Developers who migrate their content to XHTML 1.0 get the following benefits:
XHTML documents are XML conforming as they are readily viewed, edited, and
validated with standard XML tools.
XHTML documents can be written to operate better than they did before in
existing browsers as well as in new browsers.
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.

XHTML EVENTS:
When users visit a website, they do things such as click on text, images and
hyperlinks, hover-over things etc. These are examples of what JavaScript calls events.
We can write our event handlers in JavaScript or VBScript and can specify these event
handlers as a value of event tag attribute. The XHTML 1.0 has a similar set of events
which is available in HTML 4.01 specification.
The <body> and <frameset> level events
There are only two attributes which can be used to trigger any JavaScript or VBScript
code, when any event occurs at document level.
onload Script Script runs when a XHTML document loads
onunload Script Script runs when a XHTML document unloads
Note : Here, the script refers to any function or piece of code of VBScript or
JavaScript.
The <form> level events
There are following six attributes which can be used to trigger any JavaScript or
VBScript code when any event occurs at form level.
onchange Script Script executes when the element changes
onsubmit Script Script executes when the form is submitted
onreset Script Script executes when the form is reset
onselect Script Script executes when the element is selected
onblur Script Script executes when the element loses focus
onfocus Script Script runs when the element gets focus
Keyboard Events
The following three events are generated by keyboard. These events are not valid in
base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title
elements.
onkeydown Script Script executes on key press
onkeypress Script Script executes on key press and release
onkeyup Script Script executes key release
Other Events
The following seven events are generated by mouse when it comes in contact with any
HTML tag. These events are not valid in base, bdo, br, frame, frameset, head, html,
iframe, meta, param, script, style, title elements.
Onclick Script Script executes on a mouse click
Ondblclick Script Script executes on a mouse double-click
onmousedown Script Script executes when mouse button is pressed
onmousemove Script Script executes when mouse pointer moves
Onmouseout Script Script executes when mouse pointer moves out of an
element
Onmouseover Script Script executes when mouse pointer moves over an
element
Onmouseup Script Script executes when mouse button is released

Why XHTML?: Your Webpages Can Be Easily Parsed and Processed by Present and Future Web Browsers

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Why XHTML?: Your Webpages Can Be Easily Parsed and Processed by Present and Future Web Browsers

Uploaded by

Copyright:

Available Formats

Why XHTML?

You might also like