1.去除不必要的div标签：

我曾经看到好多的人将form和ul标签都包含在了div标签内。为什么要写一个不必要的标签呢。你可以给适当的选择器赋予css规则，这样也可以达到同样的效果。

例子一：

下面的列子将展示给你如何删除多余的div标签，而将css规则声明给内部的form标签。

例子二：

有时侯我们会将一些内容用额外的div标签包含起来，其目的是为了严格地控制布局的空隙。在这个例子的左边使用了一个<div class=”box”>来控制两个box之间的外边距margin。但如果每个box内都有一个标题h4，那么我们可以通过h4标签来控制外间距margin，从而可以删除掉多余的<div class=”box”>标签。

2.使用富有语义的标记：

你必须时刻都使用富有语义的标记来编写html代码（如：h1用作标题，p用作文章段落，ul则用于列表项）。那么，即使你的css文件没有引入或者没有被支持，你的html文档看起来也是富有意义的。

例子：

下面的一张图片比较了使用div标记和使用富有语义的标记编写的一段html代码（没有css代码的支持）在浏览器中编译后的效果。

3.尽可能地少使用div标签：

你是否看到过一些到处都是div的html文档，它是否让你非常地抓狂？是否你曾忘记关闭一个</div>或者无意添加了一个打开的<div>标签呢？我确定绝大多数的开发者都曾有过这样的经验。所以你需要尽可能少地使用div标签。这样以后的调试和改错的过程就会变得更加容易。

例子一：

用p标签来替代div标签去包含一个面包屑导航。

例子二：

下面的例子展示了如何通过css规则来将两个div标签替换成一个span标签。这两种写法得到的结果是完全一致的。

4.格式化（缩进）你的代码：

你在开发的过程中始终要格式化你的源代码（如缩进嵌套的标签），这样的可以方便以后的阅读和错误调试。如果你使用Adobe Dreamweaver的话，那么你可以很简单地去格式化源代码。方法：点击“命令”菜单下的“应用源代码”选项即可。

5.在</div>结束处给出相应的注释：

当你编写一个平台模板(如：Wordpress主题)代码时，这些模板文件会被分割成多个不同的文件：如：index.php, header.php, sidebar.php, 和 footer.php。因此，你必须在</div>结束处给出相应的注释。比如：当我看到</div><!– /wrapper –>时，我就知道这里是<div id=”wrapper”>标签的结束处。

总结：

1.尽可能少地使用div标签；
2.使用div标签来控制页面的整体布局，如头部，内容部，侧边栏，底部等；
3.内容必须包含在对应的语义标签内，而不是包含在div内；
4.格式化你的源代码并且在结束标签处给出对应的注释语言。

该文翻译自：WebDesignWall: Coding Clean and Semantic Templates

你也许会喜欢阅读这些：

• 2010年03月15日 -- jQuery:揭露jQuery的隐藏功能 (5)
• 2010年03月8日 -- CSS:CSS3基础（附图） (12)
• 2010年01月22日 -- jQuery:1.4新版本中你应该知道的15个新特性(二) (7)
• 2010年01月20日 -- jQuery:1.4新版本中你应该知道的15个新特性(一) (6)
• 2009年12月18日 -- Javascript:10个Javscript编程的技巧 (4)
• 2012年01月6日 -- XSLT:通过间隔符获取英文名的First Name和Last Name (3)
• 2011年04月20日 -- CSS3:Transition属性详解 (82)
• 2011年04月1日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp4.Canvas (22)
• 2011年03月21日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp3.Elements (24)
• 2011年03月15日 -- HTML5:《HTML5. Up and Running》读书笔记.Chp2.Features (23)