Tutorial - Converting A Website To XHTML

gwx03 · #1 (**permalink**) Nov 13th, 2003, 04:03

<font size="2">Note : Text adapted from www.w3.org</font id="size2">

What is HTML?

HTML is a standard for publishing hypertext on the World Wide Web. It is based on SGML and can be created and processed by a wide range of tools, from notepad to sophiscated WYSIWYG authoring tools, like Dreamweaver.

What is XHTML

The eXtensible Hypertext Markup Language is designed as a successor to HTML. XHTML is really just HTML and XML.

Why XHTML?

Too many websites produced contain bad HTML and too many browsers, especially Internet Explorer, accept not-up-to-standard and 'bad' HTML. That would mean that while some browsers can view your page, others cannot. In essence, it gives rise to bad coding practices and less cross-browser compatibility.

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

XML describes data while HTML displays data.

XHTML can be read by all XML enabled devices and while waiting for everyone to swtich to XML enabled browsers, XHTML gives you the opportunity to write clean code that work in all browsers and that are backward browser compatible.

Now, thats the end of the introduction. Lets go to the main part - switching your website to XHTML.

Assumptions :

1. You have an understanding of basic HTML
2. You have a software, such as Kate or Notepad that you can use to edit your page.

<font size="3">Switching to XHTML</font id="size3">

(a) Elements must be properly nested

This is bad code and in HTML, some elements can, however, be improperly nested within each other and yet be viewed as it should in most browsers.

[b] This text is bold and italic <//b>

This should be the correct way ( that should be done in XHTML )

This text is bold and italic [/i]

(b) 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 structure :-

<html>
<head>
// HEAD CONTENT
</head>
<body>
// BODY CONTENT
</body>
</html>

(c) Tag Names must be in Lower Case

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

This is wrong:

<BODY>
The text here is BOLD
</BODY>

This is correct:

<body>
The text here is BOLD
</body>

(d) All XHTML elements must be closed

This is wrong:

This is a paragraph

This is another paragraph

This is correct:

This is a paragraph</p>

This is another paragraph</p>

(e) Empty elements must be closed

Empty elements such as the break and the horizontal rule must be closed.

This is wrong :

This is a break

Horizontal Rule:<hr>
Image [img]badcode.gif[/img]

This is correct :

This is a break

horizontal rule:<hr />
Image [img]good.gif[/img]

IMPORTANT Compatibility Note:

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

Some Netscape ( espeically ) browsers, such as those in the 4xxx range and some in the 6xxx range will crack up with such coding ( w/out space )

(f) Attribute values must be Quoted

This is wrong :

<table width = 100% >

This is right :

<table width = "100%"

(g) Lower Case Attributes

This is wrong :

<table WIDTH = "100%">

This is correct :

<table width = "100%">

(h) 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" />

(i) The id Attribute replaces the Name Attribute

HTML 4.01 defines a name attribute for the elements ( like applets, frames, iframe, img, and map ). In XHTML, you should not use the name attribute ( it will not work). Instead, you should use the id attribute...

This is wrong:

[img]picture1.gif[/img]

This is correct:

[img]picture1.gif[/img]

Note: You should use both name and id, with identical attribute values, like this:

[img]picture.gif[/img]

This is because older browsers such as IE 4 and below and also Netscape 6 and below may not be able to view your code properly.

IMPORTANT Compatibility Note:

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

(j) 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>

(k) Compulsory DOCTYPE declaration, HEAD, BODY

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 xmlns="http://www.w3.org/1999/xhtml">
<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.

(k) (i)

Compulsory DOCTYPE declaration ( elaboration )

The basic document structure is:

<!DOCTYPE ...>
<html>
<head>
<title>... </title>
</head>
<body> ... </body>
</html>

The DOCTYPE declaration should always be the first line in an XHTML document.

A XHTML Example

This is a simple (minimal) XHTML document:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>simple document</title>
</head>
<body>

a simple paragraph</p>
</body>
</html>

The DOCTYPE declaration defines the document type:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

The rest of the document looks like HTML:

<html>
<head>
<title>simple document</title>
</head>
<body>

a simple paragraph</p>
</body>
</html>

(ii) 3 Document Type Definitions

* DTD specifies the syntax of a web page in SGML.
* DTD is used by SGML applications, such as HTML, to specify rules that apply to the markup of documents of a particular type, including a set of element and entity declarations.
* XHTML is specified in an SGML document type definition or 'DTD'.
* An XHTML DTD describes in precise, computer-readable language the allowed syntax and grammar of XHTML markup.

There are currently 3 XHTML document types:

* STRICT
* TRANSITIONAL
* FRAMESET

XHTML 1.0 specifies three XML document types that correspond to three DTDs: Strict, Transitional, and Frameset.
XHTML 1.0 Strict

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Use this when you want really clean markup, free of presentational clutter. Use this together with Cascading Style Sheets.
XHTML 1.0 Transitional

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Use this when you need to take advantage of HTML's presentational features and when you want to support browsers that don't understand Cascading Style Sheets.
XHTML 1.0 Frameset

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Use this when you want to use HTML Frames to partition the browser window into two or more frames.

End Of Tutorial

This is the end of tutorial. It has been already about 4 years since the XHTML format was introduced in early 1999. It is high-time that we convert to XHTML and be strict in our coding to produce high quality and clean codes, friendly to users of all browsers and platforms.

Smokie · #2 (**permalink**) Nov 13th, 2003, 08:42

great tutorial, thanx!

Webforumz Staff · #3 (**permalink**) Nov 13th, 2003, 15:18

Ok... Excellent tutorial. It's taught me something so I'm thankful for that!

A couple of mistakes though (I assume!)

This text is bold and italic [/i]</p>

should be...</p>

This text is bold and italic </p>

And</p>

<table width = "100%></p>

should be...</p>

<table width = "100%"></p>

Minor niggles!</p>

gwx03 · #4 (**permalink**) Nov 14th, 2003, 01:56

Oh yes; some typos but glad that yall like it...

I've edited it again... basically the bold and italic error and tablewidth.

laundrymedia · #5 (**permalink**) Dec 5th, 2003, 17:24

This was a very helpful tutorial, very basic though. What would you recommend as the imminent benefits of switching a site from HTML 4.01 to XHTML..? Or better yet, how would you convince your boss/client that they should switch their 4,000 page site to XHTML? I think applying things to real world examples is more useful for many of us and especially for beginners.

Webforumz Staff · #6 (**permalink**) Dec 5th, 2003, 20:13

Then maybe another tutorial so as not to dilute this? It is meant to be a simple tutorial on straightforward conversion.

The benefits are fairly simple in that, if you follow this standard then your site will display correctly on pretty much every browser and operating system in existence. Convincing your boss/client is directly down to what you expect your visitors will be using in terms of browser and platform.
If 99% of them are using Internet Explorer 6, then there's no business incentive.

D3mon · #7 (**permalink**) Dec 6th, 2003, 09:01

Don't forget to Validate it too!

Paul Wayrider · #8 (**permalink**) Dec 11th, 2003, 23:22

all the above would parse as html though? and if coding in html you should follow the above rules anyway?

i guess what i'm saying is we shouldn't get lazy...... off i go to edit my code :s

Webforumz Staff · #9 (**permalink**) Dec 12th, 2003, 09:01

Well, XHTML is simply an extension of HTML that has been defined very clearly and precisely so that it's easy to understand how to get it right. A few years back, plain HTML would not use many of the features above and some were simply not documented until it came to how browsers interpreted them. With no guildelines, most browsers interpreted them in different ways and that caused all sorts of problems including the creation of entirely new tags by Microsoft!!

jenjen1018 · #10 (**permalink**) Dec 30th, 2003, 20:34

i converted my html to xhtml! i have a question? is there a code for spaces all browsers can understand? ive been using &nbsp. Only IE seems to understand this. Thanks , Great tutorial.

D3mon · #11 (**permalink**) Dec 30th, 2003, 21:25

&*nbsp; is a single space (note: remove the star)

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Phaced.com Tutorial Website	cagedit	Free Web Site Critique	5	Aug 14th, 2007 00:27
Tutorial Section on your website	Pádraig	Website Planning	9	Aug 3rd, 2007 19:58
Converting from HTML to XHTML	Aaron1988	Web Page Design	1	Dec 4th, 2006 15:09
help with converting HTML to XHTML	sing2trees	Web Page Design	4	Sep 20th, 2006 03:35

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Tutorial - Converting A Website To XHTML