In this tutorial I will teach you some techniques for making sure your website is viewed well by everyone.

Bookmark these websites

http://validator.w3.org/
http://browsershots.org
http://www.onlinetools.org/tools/htmlizerdata/
http://cgi.w3.org/cgi-bin/tidy

Firstly, when creating a new website/layout it’s a good idea to always keep checking XHTML and CSS validity when changing or adding anything new. That way you can track any problems that new codes might be causing before they build up. That means even if you’ve made a tiny modification to your website (e.g posted a new blog) there may be something within the blog that’s causing your code to be invalid, something as small as typing: <hr> instead of <hr />

What is XHTML?

Read about it here on Wikipedia.

When writing a XHTML website you must put something like this at the beginning of your code so that browsers recognize it as XHTML rather than just HTML:

<?xml version="1.0" encoding="UTF-8"?> 
<!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"> 
<head> 
<title>TITLE</title> 
</head> 
<body> 
CONTENT 
</body> 
</html>

If you’re wanting your website to be XHTML Strict (which you should) then you should know the rules:

  • Always end empty elements - This means instead of <br> you must use <br />
  • Always use end tags - This means when you’re making a sentence bold using <b> you must end the sentence with </b>
  • Nest elements correctly - This means instead of using <b><i>hello</b></i> you must use <b><i>hello</i></b>
  • Use all lowercase tags - So no CAPITALS
  • Always use quotes for values - So instead of <border=0> use <border="0">
  • Give every attribute a value - Like this: disabled=”disabled”
  • Use code for special characters - So & would become &amp;
    I use this online tool to automatically do that for me
  • Use <id> instead of <name>
  • Separate CSS from scripts - Put ALL your css into a .css file and leave no css inside your scripts

This website will tidy up your HTML for you for free: http://cgi.w3.org/cgi-bin/tidy

After your website is XHTML strict, it might be time to check how it looks in all browsers. Browsershots.org will send you screenshots of your website from MANY different browsers for free. I use it and unfortunately my website does not look good in IE 6 or lower. I’m still trying to figure out how to fix that. I suggest you make an account with them. There is a limit to how many screenshots you can have each day, but it’s a reasonable limit so I wouldn’t worry about that.