Techno World Inc - The Best Technical Encyclopedia Online!

THE TECHNO CLUB [ TECHNOWORLDINC.COM ] => HTML => Topic started by: Daniel Franklin on September 26, 2007, 04:04:53 PM



Title: HTML checklist: check your HTML
Post by: Daniel Franklin on September 26, 2007, 04:04:53 PM

HTML checklist: check your HTML



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

* 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 elements must have "width" and "height" attributes.

* All 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

* 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 . If image don't have semantic meaning, alt must be empty.

* Use comments before main blocks.

* Use standard tags for creating text structure (
-
,

,

    * , , and so one).

      * Vertical and Horizontal menus must be defined using
    * .

      * Don't use and . Use and .

      * 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 (http://www.calidstyle.com)