By Editor ; July 24th, 2007
Structure and Visualization
- Do not use the
<font>element - Move arrangement attributes (align, valign, width, height) to CSS.
- Do not use tables except showing table data. Using tables for visual formatting is acceptable in complex situations only. Max table nesting can not be great than 3.
- Move attribute "background" to CSS.
- Design of input fields and buttons must be written as class in CSS.
- Styles must be written as external file and linked using
<link>. - All images related to design (not content) move to block with style
{background: transparent url("gif") no-repeat;}
HTML code
- If a table cell contains only image with width and height, then don't use these attributes for cell.
- Use minimum cols and rows for tables.
- All
<img>elements must have "width" and "height" attributes. - All
<img>elements, which are not links, don't have "border" attribute. - All attributes values must be placed in double quotes.
- All tags and attributes names must be in low case.
CSS code
- Unique elements must have "id" attribute, which is used for style. Repeated elements must use classes.
- Determine Links style through styles of (
td {}, td a {}, td a:hover {}). a:hover must redefine only changed attributes. - Determine background color for
<body>. - Split declarations to groups (fonts, tables, text blocks, divs)
- Determine geometrical dimensions in percents or pixels.
- All colors values must be as short as possible and in high case (#FFF instead of #ffffff).
- All tags and attributes names must be in low case.
- All margins and indents must be defined for all browsers.
- All classes and identifiers must be named logically with one naming convention.
Structure
- Use title, description and keywords in header.
- All elements with closing tags must have it (ideally, use XHTML 1.0 Transitional/Strict).
- Use alt attribute for
<img>. If images don't have semantic meaning, alt must be empty. - Use comments before main blocks.
- Use standard tags for creating text structure (
<h1>-<h4>, <p>, <ul>, <il>, <li>and so on). - Vertical and Horizontal menus must be defined using
<li>. - Don't use
<b>and<i>. Use<strong>and<em>. - Blocks must be placed in document in the descending order of importance. Blocks location can be defined using CSS.
_______________________
You can discuss and improve this document at http://www.htmlchecklist.com/.
Vadim Nareyko, CEO of CalidStyle.