Home arrow HTML arrow Upgrading from HTML to XHTML
HTML

Upgrading from HTML to XHTML


XHTML (eXtensible HyperText Markup Language) can be thought of as HTML 5. However, it is HTML 5 with a difference. HTML (V1, V2, V3, and V4) is becoming incompatible with modern software. The advent of XHTML is as if HTML was buried, to give birth to XHTML. If you're thinking of transitioning from HTML to XHTML, keep reading; this article will show you how.

Author Info:
By: Chrysanthus Forcha
Rating: 4 stars4 stars4 stars4 stars4 stars / 6
December 09, 2008
TABLE OF CONTENTS:
  1. · Upgrading from HTML to XHTML
  2. · Elements and Attributes
  3. · Empty Nest
  4. · Attribute Values and References

print this article
SEARCH DEVARTICLES

Upgrading from HTML to XHTML
(Page 1 of 4 )

Introduction

In this article I show you how to change an existing HTML web site to XHTML by hand and with a simple tool. A good web page is not complicated in looks or design. So you can upgrade your good web page by hand, using this simple tool.

You have to advise your users to start using browsers that were written after the year 2000 – the most recent is preferable. In this way they will not have any problem with upgraded (migrated) web sites.

The only tools you need

You need a text editor and the text editor’s Find/Replace dialog box. You usually arrive at the dialog box by clicking Edit in the menu bar; a drop-down menu appears, where you click Replace. You will need to find and replace tags as you upgrade (carry out your project).

Initial lines

Here I talk about the first lines of your web page. I'm write this article for English authors (web page designers). You have to accept what I say in this section without proof; understanding the detailed explanations of the initial lines are the subjects of other articles and are beyond the scope of this article.

The first tag of your web page should be:


<?xml version="1.0" encoding="UTF-8"?>


The first two attributes (xml version="1.0) have to do with XML (the expected general way of coding documents).

When a file is saved or sent through a network, it is not saved or sent in the way you typed it. It is encoded into a sequence of bytes. The “UTF-8” value is the encoding method. As I said, the detailed explanation of all this is beyond the scope of this article. If you are an English-speaking author and if you are designing for people who speak and read English, you can use the above as your first tag. Do not forget the question marks (?) at the beginning and end of the tag.

If you really want clean markup, free of presentational clutter, and want to use Cascading Style Sheets, your second tag should be:


<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


If you do not want Cascading Style Sheets then your second tag can be:


<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


If you want to use frames (FRAMESET) then your second tag has to be:


<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


I advise you to use the first of these three for the following reasons: it is poor programming practice nowadays not to use Cascading Style Sheets. So the second option should be out. Search engines today do not handle frames properly. This removes the third option, leaving you with only the first.

At this point in the upgrading of your web page, you should have two tags at the beginning of your web page. The next thing to handle is your HTML document. However, your usual HTML tag now has some modification. Now it has to be:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

An XHTML document will be able to have far more tags than an HTML document. The HTML document does not allow you to type in certain characters, such as mathematical symbols. Now that there are many tags, it is possible to have two of the same tags with different meanings.

Tags now have to exist in groups. Any group of consistent tags (unique tags) belongs to what is called a namespace. Our new XHTML start tag tells the browser the namespace that XHTML uses. It also specifies the human language used.

The end tag of the HTML element is the same as before, that is </html>. Note that the start tag does not begin with “<xhtml”; it begins as before with “<html”.

This is important: the letters “html” in the start and end tag must be in lower case. In fact, all of the names and attributes of tags in the web page should be in lower case.

As I said, the detailed explanation of these initial lines are beyond the scope of this article. I have given you enough explanation for you to be able to use them.

So as a minimum, your XHTML page should be:

<?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>Virtual Library</title>

</head>

<body>


</body>

</html>


When designing an ordinary web site, you can always type this before you fit in the rest of the elements (content).


blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials