How to Upgrade to XHTML?

How to upgrade your website to XHTML?

To convert your site from HTML to XHTML, you should first be familiar with the XHTML syntax rules explained in the previous chapters.

The following are the specific steps to be explained.

Add file type declaration

Add the following file type declaration at the top of each page:

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

Note:This site (codew3c) uses a strict DTD. However, using a transitional DTD is also a good choice because for most beginners, a strict DTD may seem 'too strict'.

关于文件类型声明的一点提示

A few tips about file type declarations

If you want to validate the page as correct XHTML, the page must contain a file type declaration.

It should be noted that different browsers handle documents in different ways according to the file type declaration. If a browser reads a file type declaration, it will process the document in an 'appropriate' way. Without DOCTYPE, the document may be displayed in an entirely different way.

Lowercase tags and attribute names

Since XHTML is case-sensitive and also because XHTML only accepts lowercase HTML tags and attribute names, you can perform a simple search and replace command to convert all uppercase tags to lowercase. The same treatment should be given to attribute names. We have been using lowercase letters on our website, so basically, the replacement function is not very useful.

Add quotes to all attributes

Since the W3C XHTML 1.0 standard requires that all attribute values must be quoted, if you have not noticed this detail before, you need to check each page of the website. This is a time-consuming task, so never forget to add quotes to attribute values again.

Empty tags: <hr> , <br> and <img>

In XHTML, it is not allowed to use empty tags (Empty tags). The <hr> and <br> tags should be replaced with <hr /> and <br />.

This has led to a new problem, where Netscape misreads the <br/> tag. We are not sure of the reason, but changing it to <br /> solves the problem. After realizing this, you need to go through the search and replace function again to change the tags.

Other tags (such as <img> tags) may also encounter the same problem. Do not use a closing tag to close <img>, but add / > at the end of the tag.

Validate the site XHTML Validator. After all this is done, use the following link to validate all modified pages according to the official W3C DTD:

Should we use conversion tools (such as TIDY)? Yes, we could have used TIDY.

Dave Raggett's HTML TIDYIt is a free tool used for cleaning HTML code. TIDY does a fantastic job in handling difficult-to-read HTML code generated by specialized HTML code editors and conversion tools. At the same time, it can help you identify areas in your site that need more attention to make web pages more accessible for people with disabilities.

Why did we not use Tidy? When we started creating this website, we were very familiar with XHTML. At that time, we already knew to use lowercase tags and to quote attributes. So during the website testing process, we simply tested through the W3C's XHTML validator and corrected a few errors. More importantly, we have learned a lot about writing Tidy-style HTML code.

Supplementary Reading

If you want to understand more about using XHTML to structure pages, please read the book:XHTML Structuring》。