This short guide is mainly for those who are interested in getting into XHTML programming, and/or improving the style in which it’s done from the beginning. That means that, at a minimum, you have to be able to edit your own HTML pages without having to use a visual object editor such as Design Mode in Dreamweaver. You have to know how to write some code, and understand how to edit and modify the source code of your document directly. Personally, I like using Dreamweaver in Code Mode, but there are many other good text editors out there.
For those who are already familiar with HTML, you might already know that XHTML is pretty well identical, except with a few extra rules that you need to follow, and a few extra lines added in.
Here is an example of a complete XHTML page that has all the necessary components in place for passing the XHTML validity test. It can be used for any site as a starting point, so it might be helpful to you to bookmark this page so you can come back and copy it whenever you need it. The code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
<title>Website title - the most important item for SEO</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Description is still important to some
search engines, and should be different on every page, even if only
slightly." />
<meta name="keywords" content="enter, your, page, keywords, like, this" />
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<div id="centered-block">
<div id="header">
<img src="images/logo.gif" width="225" height="46"
alt="Your logo" />
</div>
<div id="content">
<h1>Your site content</h1>
<p>This is where you can place your content. Normally, you
will want to create your navigation above this section, or
have it in a left or right column here.</p>
<ul>
<li>This is an unordered bullet list</li>
<li>You can modify the bullet by editing the
bullet-01.gif image</li>
</ul>
<p>Good luck with building the rest of your site!</p>
</div>
<div id="footer">
Copyright © 2009
</div>
</div> <!-- centered-block div ends -->
</body>
</html>
There it is! That’s all you need to get started. Just remember to include all the above code, and you’re all set to begin your next great XHTML site. Actually, everything that was added between the <body> tags is not necessary, but it can really help get you started, especially if you are developing a typical centered site.
You can view the above code in your browser by clicking here. If you want to test it out to make sure it is a valid XHTML document, you can use the W3C Validation Service. Just copy and paste the complete URL from the above site, or from a site of your own, and click the Check button at the W3C site.
Also, remember that for an XHTML document, you must always use quotes around your tag attributes (actually, you should have always been doing this no matter what!), close all tags, and include alt text for every image. Another good practice is to use comments after some of your DIV tags, so you can keep track of where you are, like I did for the centered-block div. Once your code starts to get really long, you’ll sure be glad you did that.
If you don’t have your own basic XHTML and style files for when you want to begin a new project, I recommend using the code above. You will also need a CSS file for styling the above code to make it look the way you want it to look. To make things even easier for you, however, I have created your basic index.html, style.css, set up an images folder, and packaged it all up in a zip file for you. Just download it from here:
- XHTML starter site (just unzip this and use it whenever you want to start an new XHTML site)
I recommend using the W3C validator periodically, as you are developing your site, to make sure it still passes as a valid XHTML document. It’s pretty easy to forget about closing a tag or breaking another rule that will cause your document to fail the test. Thankfully, the validator does a pretty good job of showing you where your problems are, and why you are getting errors. Good luck with developing your XHTML site!