This is my list of things to do to change my old code to make it validate:
1. All html tags and properties must be in lowercase.
2. Close all nonempty tags, including p, li, tr, td, dd, and dt.
3. Make all empty tags self-closing. Be sure to put the space before the slash, or IE goes nuts.
<img src="stick-out-tongue.jpg" alt=":p" />
4. Block tags can not be inside inline tags. For example:
- ul or ol can't be inside p
- div can't be inside strong
- table can't be inside h1
- li can't be used without ol or ul, or inside another li without another ol or ul
5. ALL values for properties, including numbers, must be inside quotes.
6. The character code must be supplied for any ampersand, less than, greater than, or quote signs which appear within text. Precede the code with an ampersand, and end it with a semicolon. Use:
7. With tables, the tags thead, tfoot, and tbody must either be all present or all absent. If present, they must be in the order I listed them.
8. The center and font tags, and the height and width properties are deprecated.
9. Style sheet names and properties are case-sensitive.
Remember that different browsers display valid code in different ways. The most common difference between browsers is whether the styled widths or heights of block objects include the padding, border, and margin sizes. Some browsers include them, others exclude them. This causes the following rendering problems:
- Columns made with div collapse into single file if the resulting widths are wider than the browser window.
- Column widths are uneven in both div and table constructions.
- The page is wider than the window and causes a scroll bar to appear.
- Centered objects are displaced to the left or the right.