In Part One I discussed the Benefits of HTML Validation.
Part One can be viewed here. For Part Two I will discuss:
A. What to validate your web pages for
B. The validation process
C. Validation Tools
D. Common validation errors
A. What to validate your web pages for:
1. Doctype
2. HTML or XHTML document ( or other coding languages you have used)
3. CSS style sheet
4. Links
5. Browsers
6. Screen Resolution
7. Connectivity
B.The validation process
1. Use the correct DOCTYPE ( Document Type Definition, or DTD)
This defines which version of HTML or XHTML your document is actually using. It’s needed by browsers or other tools to process the document correctly.
Using an incomplete, outdated or no DOCTYPE at all, throws some browsers into “Quirks” mode, where the browser assumes you’ve written old-fashioned, invalid markup.
This means that your web pages may not render well in all the major browsers.
The DOCTYPE tag should be placed at the top of each web page.
Here are the correct DTDs to use:
HTML 4.01 Strict, Transitional, Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">XHTML 1.0 Strict,
Transitional, Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">XHTML1.1 DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Here’s an example of a web site I recently designed which has correctly validated XHTML and CSS: http://www.discount-real-estate-listings-md.com/
2. Validate your HTML or XHTML document ( and other coding languages you have used).
If you validate your code it will make it easier for:
– search engines to index your web pages
– pages to load faster
– make your pages accessible for other devices that surf the Web.
– checking coding errors by running your pages through a validator.
3. Validate your Cascading Style Sheets (CSS).
If there are errors in your CSS, the layout of your web pages will be affected and your site will not appear correctly when viewed in any of the main browsers.
Broken links in your web pages will:
– frustrate your visitors when searching for relevant information from your site.
– affect search engine rankings. When spiders can’t index the links on your site they won’t find your keyword rich web pages.
5. Check browser compatibility
The main browsers you should design your web site for include: Internet Explorer (IE6, IE5), Firefox, Opera, and Netscape (Mozilla).
This is according to the current statistics taken from: http://www.w3schools.com/browsers/browsers_stats.asp
6. Test for different screen resolutions
The current trend is that more and more computers are using a screen size of 1024×768 pixels:
Here are the stats for June 2005:
1024×768…………………………56%
800×600………………………….28%
Higher than 1024×768…………11%
7. Check connectivity speeds
Web pages that contain a large number of graphics or tables, use flash or video, will load slowly or sometimes not at all with a dial up connection but will be fine with a cable or dsl connection. Although the trend is towards people converting to high speed connections many still use dial-up to surf the Net for information. Therefore design your site for both.
C.Validation Tools
HTML/XHTML validation
CSS validation
http://jigsaw.w3.org/css-validator/
Link checker
http://validator.w3.org/checklink
Browser Compatibility
Connectivity Test
http://www.websiteoptimization.com/services/analyze/
http://www.netmechanic.com/maintain.htm
D.Common HTML/XHTML validation errors
Improper Nesting of Tags
This is a very common error. You should close tags your in the reverse of the order you opened them:
<xx><yy>content</yy></xx>.
An easy error to make, but it’s easy to fix, too.
Missing alt tags
You should include alt tags for all your images with a text description so that visitors will still know what the image is about even if they turn off viewing images in their browser.
Improper closing of tags
ie <p>This is a paragraph<p>. The end tag should be </p>
It will validate in html, but not xhtml.
For XHTML 1.0 validation it’s easy to omit these closing tags:
<br /> or <hr /> or <img src="xx.gif" />
Margin height and width
marginheight="0"
^Error: there is no attribute “MARGINHEIGHT” for this element. Use CSS to fix this error.
marginwidth="0"
^Error: there is no attribute “MARGINWIDTH” for this element. The only fix for this is to utilize CSS and absolute positioning.
Horizontal Line Color
<hr size="1" color="#C0C0C0">
^Error: there is no attribute “COLOR” for this element.
This can only be fixed with CSS.
ie <div
style="color:#000;background-color:#C0C0C0;height:1px;font-size:1px;">
</div>
Border Color
bordercolor="#ffffff"
^Error: there is no attribute “BORDERCOLOR” for this
element. This can only be fixed with CSS.
Unescaped Ampersand (XHTML)
Always use & in place of &.
Conclusion:
If you get into the habit of always validating your web pages, your web site will be faster loading, more search engine friendly, accessible to a greater number of devices and therefore appeal to a larger number of visitors.
Herman Drost is the Certified Internet Webmaster (CIW)
owner and author of http://www.iSiteBuild.com. Affordable
Web Site Design and Web Hosting. Subscribe to his
“Marketing Tips” newsletter for more original articles.
mailto:subscribe@isitebuild.com. Read more of his
in-depth articles at: http://www.isitebuild.com/articles
