4WebHelp: XHTML Basics

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?

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

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

Page URL: http://www.4webhelp.net/tutorials/html/xhtml.php
Back to the "pretty" page!

© 2024, 4WebHelp Team.