XHTML

° XHTML (EXtensible HyperText Markup Language)
TUTORIAL-----------------------------------------------------------------------------

Introduction to XHTML

What is XHTML?

XHTML stands for EXtensible HyperText Markup Language
XHTML is aimed to replace HTML
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

Why XHTML?

We have reached a point where many pages on the WWW contain "bad" HTML.

The following HTML code will work 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
</body>

XML is a markup language where everything has to be marked up correctly, which results in "well-formed" documents.

XML was designed to describe data and HTML was designed to display data.

Today's market consists of different browser technologies, some browsers run internet on computers, and some browsers run internet on mobile phones and palm pilots. The last-mentioned do not have the resources or power to interpret a "bad" markup language.

Therefore - by combining HTML and XML, and their strengths, we got a markup language that is useful now and in the future - XHTML.

XHTML pages can be read by all XML enabled devices AND while waiting for the rest of the world to upgrade to XML supported browsers, XHTML gives you the opportunity to write "well-formed" documents now, that work in all browsers and that are backward browser compatible !!!

Differences Between XHTML and HTML

You can prepare yourself for XHTML by starting to write strict HTML.

How to Get Ready for XHTML

XHTML is the next generation of HTML, but it will of course take some time before browsers and other software products are ready for it.

In the meantime there are some important things you can do to prepare yourself for it. As you will learn from this tutorial, XHTML is not very different from HTML 4.01, so bringing your code up to 4.01 standards is a very good start.

In addition, you should start NOW to write your HTML code in lowercase letters, and NEVER make the bad habit of skipping end tags like the </p>.

Happy coding!

The Most Important Differences:

XHTML elements must be properly nested
XHTML documents must be well-formed
Tag names must be in lowercase
All XHTML elements must be closed

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 in nested lists, is to forget that the inside list must be within a li element.

This is wrong:

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  <li>Milk</li>
</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.

Documents Must Be Well-formed

All XHTML elements must be nested within the <html> root element. All other elements can have sub (children) elements. Sub elements must be in pairs and correctly nested within their parent element. The basic document structure is:

<html>
<head> ... </head>
<body> ... </body>
</html>

Tag Names Must Be in Lower Case

This is because XHTML documents are XML applications. XML is case-sensitive. Tags like <br> and <BR> are interpreted as different tags.

This is wrong:

<BODY>
<P>This is a paragraph</P>
</BODY>

This is correct:

<body>
<p>This is a paragraph</p>
</body>

All XHTML Elements Must Be Closed

Non-empty elements must have an end 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 either have an end tag or the start tag must end with />.

This is wrong:

This is a break<br>
Here comes a horizontal rule:<hr>

This is correct:

This is a break<br />
This is a break too<br></br>

Here comes a horizontal rule:<hr />

IMPORTANT Compatibility Note:

To make your XHTML compatible with today's browsers, you should add an extra space before the "/" symbol like this: <br />, and this: <hr />.

Writing XHTML demands a clean HTML syntax.

Some more XHTML Syntax Rules:

Attribute names must be in lower case
Attribute values must be quoted
Attribute minimization is forbidden
The id attribute replaces the name attribute
The XHTML DTD defines mandatory elements

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:

<dl compact>
<input checked>
<input readonly>
<input disabled>
<option selected>
<frame noresize>

This is correct:

<dl compact="compact">
<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	XHTML
compact	compact="compact"
checked	checked="checked"
declare	declare="declare"
readonly	readonly="readonly"
disabled	disabled="disabled"
selected	selected="selected"
defer	defer="defer"
ismap	ismap="ismap"
nohref	nohref="nohref"
noshade	noshade="noshade"
nowrap	nowrap="nowrap"
multiple	multiple="multiple"
noresize	noresize="noresize"

The id Attribute replaces the Name Attribute

HTML 4.01 defines a name attribute for the elements a, applet, frame, iframe, img, and map. In XHTML the name attribute is deprecated. Use id instead.

This is wrong:

<img src="picture.gif" name="picture1" />

This is correct:

<img src="picture.gif" id="picture1" />

Note: To interoperate with older browsers for a while, you should use both name and id, with identical attribute values, like this:

<img src="picture.gif" id="picture1" name="picture1" />

IMPORTANT Compatibility Note:

To make your XHTML compatible with today's browsers, you should add an extra space before the "/" symbol.

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 add the xml:lang attribute, like this:

<div lang="no" xml:lang="no">Heia Norge!</div>

Mandatory XHTML Elements

All XHTML documents must have a DOCTYPE declaration. The html, head and body elements must be present, and the title must be present inside the head element.

This is a minimum XHTML document template:

<!DOCTYPE Doctype goes here>
<html>
<head>
<title>Title goes here</title>
</head>

<body>
Body text goes here
</body>

</html>

Note: The DOCTYPE declaration is not a part of the XHTML document itself. It is not an XHTML element, and it should not have a closing tag.

You will learn more about the XHTML document type definition in the next chapter.

NEXT Lesson»