转载请注明出处：drupal花园

本文永久链接地址：http://drupalgarden.cn/node/249

假如你是所有的标签都使用<div>，这篇文章正适合你。本文重点讲述如何利用语义化标签和尽可能少地使用<div>标签来书写简洁的HTML代码。你是否编辑过某些人的模板，而被那些杂乱标记逼疯呢？书写简洁的模板将对你和你的团队共同获益。这将节约你调试和编辑的时间（尤其是大型的项目）。

1.移除不必要的<div>标签

我看到很多人在<form>和<ul>菜单列表外面包着<div>。为什么要加个你不需要的<div>标签呢？你可以使用CSS的选择器规则去实现同样的效果。

例1：

下面的例子将告诉你如何去除<div>标签和通过样式来定义form选择器。

例2：

通常我们会在内容外面包着一个额外的<div>，仅是为了调整间距。下例中左侧的<div class="box">（注：原文写的是sidebox，而下图是box，所以龙马纠正了一下。）是为了在盒子(Boxes)之间添加外边距(Margin)。但是如果每个盒子都有一个标题(比如：<h4>)，我们可以直接定义h4选择器的外边距，移除多余的<div class="box">标签。

2.使用语义化标签

你应该使用语义化标记来编写HTML文档（比如：<h1>是标题，<p>是文本段落，而<ul>是列表元素）。因此，即使CSS不被支持，您的文档仍然是有意义的。

例如：

下图是比较<div>标记和语义化标记在CSS不被支持时的呈现差异。

3.最少化使用<div>标签

你是否见过混乱的模板<div>标签随处可见，让你抓狂的？是否因为少了个</div>标签或者多了一个<div>标签而破坏了整体的布局？我相信很多开发者都有过这样的经历。因此，如果可能的话，请你尽可能地少用 <div> 标签。这将让你的调试和编辑更加方便。

例1：

面包屑导航应该使用更有意义使用<p>标签，而不是<div>标签。

例2：

下面例子展示如何使用CSS的方式，将2个 <div> 标签替换为1个 <span> 标签。他们的显示效果是一样的。

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

对你的源代码要进行格式化（即缩进嵌套元素），这样让它们看来更容易阅读和调试。加入你有在用Adobe Dreamweaver，你可以很方便地使用命令 > 应用原格式 (Commands > Apply Source Formatting) (从程序菜单里)。

5.在 </div> 标签结尾添加注释

当您编写一些平台模板（比如WordPress 主题）（龙马译注：还有我们的Drupal主题哦），通常模板是分布在好多个文件里：index.php, header.php, sidebar.php, and footer.php。因此，你应该在<div> 标签结尾加上注释，这样您就不会遗漏了。例如，当我看到 </div><!-- /wrapper -- >，我就会知道它是<div id="wrapper">.的结尾标记。

例如：

我通常在</div> 标签结尾添加一个 HTML 注释标记。我使用正斜杠，表示它是结束标记。

结论：

• 尽量减少使用<div>标记。
• 你应该尽可能地将 <div> 标签用来做主体部分的布局，比如：头部，内容，侧栏，底部（header, content, sidebar, and footer）。
• 内容部分尽量使用语义化的 HTML 标签，而不是div标签。
• 格式化您的源码并且在 </div> 结尾添加注释标记。

英文原文链接：Coding Clean and Semantic Templates