XHTML/CSS: The BasicsBest practices for standards oriented front end development

HTML vs. XHTMLThey are slightly different. Write XHTML, the end.Element and attribute names must be lower case, attribute values must be quoted.Never skip closing tags, this happens a lot. <br /> <hr /> <img src=”#” /> Name attribute is now “id”

Head ContentDoctype, Title Tag. Don't forget these!Use conditional statements because IE6 is the Devil, so learn to hate it.Write CSS for Firefox and Safari.Add CSS for bad browsers (that's you, IE6).

Conditional Statements“Browser Hack” <!--[if IE 6]> link to another css sheet here <![endif]--> <!--[if IE 7]> link to another css sheet here <![endif]-->

How I Start A ProjectApplication.css IE6_only.css IE7_only.css Reset.css McKinsey CSS/HTML fix_png.js

Don't Write Crappy CodeXHTML Transitional Empty tags == bad <br /> are crap, use margins Use inline and block elements for their intended purpose Poorly structured markup, bad layout decisions. Write as little markup as possible!

Tables are OK<table> <thead> <tr> <th>Table Header</th> </tr> </thead> <tbody> <tr> <td>Table Cell</td> </tr> </tbody> <tfoot> <tr> <td>Table Cell</td> </tr> </tfoot> </table>Proper Table Structure