You are using a browser which is not compatible with CSS (for more information, see Tara's tutorial). Because of this, it is possible that our website may not appear correctly in your browser. We apologise for the inconvenience, and recommend you upgrade your browser to one which is compatible with CSS. For more information, please visit our Browser Upgrade page.

4WebHelp

XHTML Basics by Daniel

Last updated: 02/05/2012
Biography: Daniel has been interested in web design since 1999, when he first started designing a personal website. Since then, he has learnt much, and is interested in new web standards like XHTML and CSS, and in PHP.

Daniel is responsible for managing the 4WebHelp Forums, along with the forum moderators. He should be contacted for any modifications to your forum account (which you cannot do through the phpBB interface) and for any issues you may have with moderation.
See 9 more tutorials by Daniel

Introduction to XHTML
The bridge between HTML and XML...

This tutorial is aimed at the average web designer with a decent knowledge of HTML (version 4) - it assumes that you know the basic HTML tags. It draws some content from the W3C's XHTML 1.0 Recommendation (the W3C is the organisation which sets web related standards).

What is XHTML?

As you discover XHTML, you will realise that XHTML is really more similar to HTML than it is different. The "changes" aren't really changes, but just a set of stricter standards to obey.

XHTML stands for Extensible HyperText Markup Language. XHTML is a cross between HTML and XML. Any XHTML document will be valid HTML and valid XML, which means it can be opened in any XML editor.

Why the need for XHTML?

  • XML allows the developer to add new tags whenever they want, allowing for more flexibility and creativity.
  • New ways of accessing the Internet are being created every day. XML/XHTML is a common standard for all these browsers/clients, which stops different standards being created for each of these methods.

To validate as XHTML, a document must strictly follow the following guidelines:

  • The "root tag" (the highest one - it is not enclosed in another tag) of the page must be <html>.
  • The root tag must contain an XHTML declaration, like this: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">.
  • There must be a "DOCTYPE" declaration before the <html> tag, like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • All other guidelines detailed below.

Example XHTML document:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Example Page</title>
</head>
<body>
<p>Moved to <a href="http://example.org/">example.org</a>.</p>
</body>
</html>

How is it different from HTML?

XHTML is stricter on a number of points, which are detailed below. These guidelines must be followed, otherwise your document will not validate as proper XHTML.

1. Nested elements:

This is not correct: <p>Hello <strong>Daniel</p></strong> (the tags must be closed in the order in which they were opened)

This is correct: <p>Hello <strong>Daniel</strong></p>

2. Unterminated tags:

All tags must be closed, even <img> tags.

This is not correct: <img src="img">

This is correct: <img src="img" />

<img src="img"></img> is also correct.

This is not correct: <p>Paragraph 1 <p>Paragragh 2 (notice the unclosed tags)

This is correct: <p>Paragraph 1</p> <p>Paragraph 2</p>

3. Attributes and tag names:

This is not correct: <A HREF="LINK">link</A> (notice the capitals - only lowercase is allowed)

This is correct: <a href="link">link</a>

4. Quoted attributes:

This is not correct: <div align=center> (notice the absence of quotes around "center")

This is correct: <div align="center">

5. Attribute minimisation:

This is not correct: <dl compact>

This is correct: <dl compact="compact">



We hope you have enjoyed this tutorial. Now it's time to get to work and convert your site to XHTML! If you need any help, as always, ask in our forums!

© 4WebHelp and Daniel

Latest comments on this tutorial
shan
it is NOT allowed to use "align" in xhtml. align should be specified in css (?)
Roger Burgess
This is not correct: <img src="img">

This is correct: <img src="img" />

Ehh didnt know this.
HTML
NICE ARTICLE
Robert
Great tutorial well written Smile

http://www.eukhost.com
Jack
It's a terrible tutorial and tells you nothing about xhtml, it goes over the rights and wrongs in coding html which happen to also apply to xhtml and does even state the basic differences in the code! Show us some of the bloomin improvments.
evelyn
its cool, thanx
Dustin Barbour
Also avoid nested tables.. Instead learn to use &lt;div&gt;&lt;/div&gt; coupled with CSS to position them.
s
Really nice and comprehensive tutorials...
Bennie
Very succinct - a quick and helpful overview.
vulcanpimp
Nice.

Wouldn't mind some links to a bank of XHTML files in strict DTD.

Looking at examples of HTML was the quickest way to learn that.

Add a new comment

This page is © Copyright 2002-2017, 4WebHelp. It may not be reproduced without 4WebHelp's prior permission.