Html Examples
<html>
<head>
<title>HTMLchecklist Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<meta name="Keywords" content="HTML, checklist, css">
<meta name="Description" content="HTMLchecklist - Check Your HTML">
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<div id="header">
<h1>HTMLchecklist - <span>Check Your HTML</span></h1>
</div>
<div id="block">
<h1>1. Structure and Visualization.</h1>
<ul>
<li>Do not use <font> element.</li>
<li>Move arrangement attributes (align, valign, width, height) to CSS.</li>
<li>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.</li>
<li>Move attribute "background" to CSS.</li>
<li>Design of input fields and buttons must be written as class in CSS.</li>
<li>Style table must be written as external file and linked using <link></li>
<li>All images related to design (not content) move to block with style {background: transparent url("gif") no-repeat;}</li>
</ul>
<h1>2. HTML code</h1>
<ul>
<li>If table cell contains only image with width and height, then don't use these attributes for cell.</li>
<li>Use minimum cols and rows for tables.</li>
<li>All <image> elements must have "width" and "height" attributes.</li>
<li>All <image> elements, which are not links, don't have "border" attribute.</li>
<li>All attributes values must be placed in double quotes.</li>
<li>All tags and attributes names must be in low case.</li>
</ul>
<h1>3. CSS code</h1>
<ul>
<li>Unique elements must have "id" attribute, which is used for style. Repeated elements must use classes.</li>
<li>Determine Links style through styles of (td {}, td a {}, td a:hover {}). a:hover must redefine only changed atttributes.</li>
<li>Determine background color for <body></li>
<li>Split declarations to groups (fonts, tables, text blocks, divs)</li>
<li>Determine geometrical dimensions in percents or pixels.</li>
<li>All colors values must be as short as possible and in high case (#FFF instead of #ffffff).</li>
<li>All tags and attributes names must be in low case.</li>
<li>All margins and indents must be defined for all browsers.</li>
<li>All classes and identifiers must be named logically with one naming convention.</li>
</ul>
<h1>4. Structure</h1>
<ul>
<li>Use title, description and keywords in header.</li>
<li>All elements with closing tags must have it (ideally, use XHTML 1.0 Transitional/Strict).</li>
<li>Use alt attribute for <image>. If image don't have semantic meaning, alt must be empty.</li>
<li>Use comments before main blocks.</li>
<li>Use standard tags for creating text structure (<h1>-<h4>, <p>, <ul>, <il>, <li> and so one).</li>
<li>Vertical and Horizontal menus must be defined using <li>.</li>
<li>Don't use <b> and <i>. Use <strong> and <em>.</li>
<li>Blocks must be placed in document in the descending order of importance. Blocks location can be defined using CSS.</li>
</ul>
</div>
<div id="footer">
<p><a href="http://htmlChecklist.com/">HtmlCheckList.com</a> Copyright 2006-2008</p>
</div>
</body>
</html>
Download Html Example: click there