paul's html coding conventions

1. HTML source code should be organized to make it easy to maintain by others, even if they are using a regular text editor.
2. File names should generally be all lowercase, preferable single word (where that is unambigous), and end with .html.
3. Test environment should be latest versions of Firefox and of MSIE on Windows XP with 800x600 display or bigger, installed on a server running latest standard install of Apache webserver.
4. Lines should be shorter than 78 characters. This means that you should in general not indent with each new table element, as it will create lines too long. Instead, use whitespace between table rows etc.
5. Web pages should be optimized for 800x600 pixel displays. All info should be "above the fold", without requiring the user to use a scroll bar to see important info.
6. Web pages should also automatically resize and look fine on different size displays as much as possible. This means that most tables and table cells should not have fixed sizes, but should instead grow to fit into the enclosing page or table.
7. Use "pt" not "px" for font sizes in CSS files etc, to make your design work well for any resolution monitor.
8. Use include directives with standard headers and footers, to make it easier/quicker to create new sub-pages, and easier to change the header or footer by only editing one or two files vs. having to edit every file on the website. Include a template.html which should be the template someone can start with to make a new subpage. The basic template.html should have the include directive for include/header.html and include/footer.html, with content to be filled in between.
9. Use CSS files to have more compact and clear HTML (without having to constantly repeat formatting info) and also to give the ability to change format instantly by simply editing one CSS file.
10. Pages should load quickly; maybe 50k target for most pages, and maybe 3-6 included files or images max.
11. Menus should be easy to change; ideally without having to use an image editor.
12. Do not use images when you can instead get away with text with specified attributes (font, color, size, face) or with carefully colored table cells.
13. HTML keywords should be lowercase. Images should have completed tags for alt, width, height. Tables should explicitly have a tag saying border=0, to make it trivial to quickly change to 1 when debugging table alignments visually.
14. JavaScript should be well formatted.

See Also

• Source HTML/CSS/template code for my paulenglish.com site.
• Paul's Coding Conventions
• simplelist.org is an example site using the above conventions
• dmoz HTML