Recommended XHTML and CSS Practices

1.Divitis , Classitis, Tagitis

Please think twice before adding a tag to the page.

Bad code

 
<div id="header">
 
<div class="headerTop">
<h2 class="headerTxt">Site Name</h2>
</div>
 
<div class="headerTagline">
<span class="tagline">tagline</span>
</div>
 
</div>

Better Way

 
<div id="header">
<h2>Site Name</h2>
<span class="tagline">tagline</span>
</div>

2.Tables are okay for tabular data

I see some times that web developers are so passionate about divs and table less designs that they try to fake a table using divs (I was one among them :D) Be sensible to use tables when you are needing to show tabular data, like a list of customers orders etc.

 
<table>
  <tr>
    <th>col1</th>
    <th>col2</th>
    <th>col3</th>
  </tr>
  <tr>
    <td>1</td>
    <td>varun</td>
    <td>varunkrish.com</td>
  </tr>
  <tr>
    <td>2</td>
    <td>google</td>
    <td>google.com</td>
  </tr>
</table>
 
is okay compared to 
 
<div id="table">
  <ul class="heading">
    <li>col1</li>
    <li>col2</li>
    <li>col3</li>
  </ul>
  <ul>
    <li>1</li>
    <li>varun</li>
    <li>varunkrish.com</li>
  </ul>
  <ul>
    <li>2</li>
    <li>google</li>
    <li>google.com</li>
  </ul>
</table>

3.Let the page have good content flow even with CSS removed.

By writing Semantic Markup, you make sure the content flow displayed to the user remains the same even with CSS turned off.
This is very critical when you see from the angle of the Search Engines and Mobile / PDA Devices.This also mean that you separate the content from the presentation

4.Use Tools to make ur life easier

Firefox – Web Developer Toolbar

IE – IEDEV Toolbar

Opera – Dev Opera tools

5.Why do you need Inline Styles ?
Dont use them unless you want to messy code . Try to keep all the CSS in external files. Split the files if it gets big.

6.CSS / Loading times

When loading times of CSS file becomes a concern , you must try moving the styles into separate files so as to the reduce the amount of data. Also you dont need all the styles in the world for a single page. So organize them acording to your needs

7.Use relative paths to images

I see a a lot of sites using absolute paths for images used in either the HTML code or for the CSS background images.

Be smart, use relative paths to your images.

use 
background-image:url(/images/background.gif);
 
instead of 
background-image:url(http://site.com/images/background.gif);

8. I can do a lot of this with HTML why do i need XHTML ?

But HTML is loosing adoption and XHTML is gaining acceptance.Check these pages

for some benefits

New York Library site
WSG

XHTML is more closer to XML although both are derivatives of the same.

9.Make you site printer friendly with just a extra line of code and a CSS file

You must have seen media=”print” or media=”projector” line while including CSS files.

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Should do the trick

10. Use a Syntax validator