Techno World Inc - The Best Technical Encyclopedia Online!

THE TECHNO CLUB [ TECHNOWORLDINC.COM ] => HTML => Topic started by: Daniel Franklin on September 28, 2007, 09:43:01 AM



Title: HTML checklist: check your HTML
Post by: Daniel Franklin on September 28, 2007, 09:43:01 AM


    * Do not use <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.
    * 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 and . Use <strong> 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://calidstyle.com/)