1  XHTML Introduction:
Before you begin, you need to have a good basic understanding of HTML, as we are dealing primarily with the differences between XHTML and HTML.
So, what is XHTML?
XHTML stands for eXtensable HyperText Markup Language.... that's a real mouthful, huh? Well, it's simply just a cross between HTML and XML, so you can relax. XHTML was created for two main reasons:
- To create a stricter standard for making web pages, reducing incompatibilities between browsers
- To create a standard that can be used on a variety of different devices without changes
XHTML is the future of the internet, whether we like it or not. It is the newest generation of HTML In this tutorial we will look into how XHTML differs from HTML 4 and how you can update your pages to support it. Although there is no great rush to make the change, all of your knowledgeable viewers will see that you may not be up to date, and some search engines are already doling out fewer placement points for sites that are not XHTML compliant.
The best thing about XHTML is that it is really not all that different from regular HTML, and there is not a whole lot to learn; but it is much more important that you create your code correctly. You cannot fudge or make malformed code if you want to be XHTML compatible. Unlike HTML, where simple errors like having missing closing tag are ignored by the browser, XHTML code must be exactly how it is specified to be. This is the most important rule you will need to remember; browsers in handheld devices, quickly becoming popular now, and a few of the regular types used at home PCs may not show badly formatted pages at all.
There are several main changes in XHTML from HTML:
* All tags must be in lower case
* All documents must have a correct DocType
* All documents must be properly formed
* All tags must be closed
* All attributes must be added properly
* The name attribute has changed
* Attributes cannot be shortened
* All tags must be properly nested
If this seems to be a big headache, don't worry-- you will find that not a whole lot on your website actually needs to be changed. I will go though each of these changes step by step, and will explain exactly what is different.
The Doctype
The first thing you will have to deal with is the Doctype. When using regular HTML it is considered good practice to add a Doctype to the beginning of the page like this. This was optional in HTML, but XHTML requires you to add a Doctype. There are three types that you may use.
Strict - This is used mainly when the markup is very clean and there is no 'extra' markup to aid the presentation of the document. This is best used if you are using Cascading Style Sheets for presentation:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional - This should be used if you want to use presentational features of HTML in your page. This is the most commonly used, if you want something other than a "plain Jane" page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w
3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Frameset - This should be used if you want to have frames on your page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
The doctype declaration must be at the very top, the first line of your document. It should be the only thing on that line. (If the examples below appear as two lines, that is only caused by your viewing resolution). Don't worry about this doctype confusing older browsers-- doctypes are actually only comment tags. The doctype is used to find the document type that the page is written as. Only browsers and validators which support it will pay attention to it,
After the Doctype line, the XHTML content can be started. As with HTML, XHTML has <html> <head> <title> and <body> tags but, unlike HTML, they must all be included in a valid XHTML document. The correct format to use is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Your Page Title Here</title>
Your Head Content Here
</head>
<body>
Your Page Content Goes Here...
</body>
</html>
The example above uses the transitional DocType, which is probably the most common one used, unless you plan on having a fairly straight-laced page, composed mainly of text; this DocType seems a little more adaptable, in my view.
Okay, so let's go and check out the format of the XHTML Tags in the Part 2.
|
