|
|
How to Always Create Valid XHTML Websites
2008-03-09
In today's internet, making a website that is not standards compliant doesn't make a whole lot of sense. First of all, you're already spending a lot of time creating the web design, coding the script, to be followed by promotion. So why not insure that the site conforms to standards which will help it to render correctly across all platforms? Even if you didn't code the site to be compliant, it takes no more than 10 or 20 minutes for even very large sites to be edited into compliance. Finally, by starting a project with standards compliance in mind, you can easily pass the validation process in under a minute, and in the end, saving web development time. Really, the question is not why should you code valid XHTML, but rather, why wouldn't you?
To begin, it's important to understand some of the fundamental rules of XHTML, the most important being that all tags must be closed. If a tag doesn't have a closing tag, such as an image tag <img src=”pic.gif” alt=”pic”> then it should be self closing. For example, in normal HTML this is a correct line break: <br> however in XHTML this code will need to be self closing using this syntax: <br /> The next thing that you should pay attention to is that some elements from HTML 4 aren't fully supported, such as bold <b></b>, which is superceded by <strong></strong>. In addition, all tags should be in lowercase, all attributes to a tag must be in quoted. Another important thing is that you should always declare the document type at the very top of the file, and the head and body tags are required.
Once you've got a bare skeleton of a valid XHTML webpage, it's a good idea to make templates so that you always have them easily at hand to start any work from. It's especially tedious to try and remember the text for declaring the doctype each time, so heck yeah, bring on the template: <!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> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title></title> </head> <body> </body> </html> Once you start coding like this from habit, writing valid XHTML is easy, and it makes coding web designs easier. There's a few things I've included in the template, and I'll mention why. Notice in the HTML tag I specify a default namespace and language for the file. Then, within the head I have a meta tag that selects utf-8 as the character set. Notice also that I used transitional XHTML instead of strict. That allows us a little more slack in the old HTML code that we can use, including allowing us to use the <center> tags.
To help you along and/or to to fix validation errors immediately, I recommend using the web developer toolbar plugin for Firefox. Using it you will get a quick validation each refresh of whether or not the site validates. It also includes CSS and Javascript validation as well, although that's beyond the scope of our topic in this article.
Finally, when you're done just run your site through the official validator at http://validator.w3.org/ If for some reason you don't pass, just read the error messages, correct the mistake and try again. Do not try and fix all of them, because often the errors are cascading (in other words, fixing one error makes everything else correct because the first error caused the rest of them.) Have fun and keep the web development up!
View other articles in the Web Design category.
View other articles in the HTML sub-category. |