RealityNext

I have web design and development company CalidStyle (http://www.calidstyle.com). We use this document for checking our results after any HTML cutting. I hope that it’ll help for new and experienced developers.

Structure and Visualization.

- Do not use 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.

- Style table 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 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 < image> elements must have “width” and “height” attributes.

- All < image> 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 atttributes.

- 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 < image>. If image 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 one).

- 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