使用Dojo的Ajax应用开发进阶教程，第2部分: 富含语义的HTML

使用Dojo的Ajax应用开发进阶教程，第2部分: 富含语义的HTML2011-01-21 IBM 成富相关文章：

HTML 是开发 Web 应用的基础。目前已经有数以千亿的使用 HTML 语言编写的网页。HTML 语言的规范也不断在演进和更新。HTML 语言虽然上手比较简单，但是如何开发出组织良好、结构清晰和可维护性高的 HTML 文档，对很多Web开发人员来说，也是一个值得探讨的话题。随着 Ajax 应用的流行，一种称为“富含语义的 HTML（Semantic HTML）”的最佳实践，逐渐被广大人员所推崇。这种实践的主要思想是还 HTML 以本来面目，只使用 HTML 来描述文档的结构，而把与展示相关的部分从 HTML 文档中剥离出去，交给 CSS 来处理。本文将详细介绍这一最佳实践，涉及的内容包括 HTML 规范的演化历史、推荐使用的 HTML 元素和属性、一系列具体的最佳实践和微格式。

下面从富含语义的 HTML 的简要介绍开始，所涉及的内容包括 HTML 规范历史以及它与 CSS 和 JavaScript 的关系。

富含语义的 HTML 介绍

富含语义的 HTML（Semantic HTML）指的是编写 HTML 文档的一种很好的实践。这种实践要求在编写 HTML 文档时，尽可能的使用 HTML 规范中定义的与文档结构相关的富含语义的元素，而避免使用与展示相关的元素，将展示相关的内容交给 CSS 去处理。通过应用这种实践，可以将 HTML 文档的结构与展示分离，使两者达到松散耦合。这种松散耦合带来的好处是使得结构和展示可以分别独立变化，不会杂糅在一起。当只需要修改 Web 应用的外观时，理想情况下，Web 应用的 HTML 文档都不需要修改，只需要修改 CSS 文件即可。

Ajax 应用的流行，从一个方面推动了这种实践的流行。目前的 Web 2.0 应用都要求快速上线，并且以渐进的方式不断推出新功能，即所谓的“永远 beta 版（perpetual beta）”。这种需求对于 Web 应用的架构有比较高的要求。只有在各个部分松散耦合的情况下，快速添加新功能或改进已有功能才是可能的。富含语义的 HTML 的实践促进了 Web 应用的松散耦合，因此越来越被广大 Web 开发人员所接受。另外，HTML 语言自身的演化发展，也从一个侧面反映出了这个趋势。下面将从简要介绍 HTML 语言的历史开始，并介绍富含语义的 HTML 与 CSS 和 Ajax 应用的关系。

HTML 的历史

HTML 语言从诞生之日起一直在不断演化，其规范的版本也有很多。HTML 的发展历史可以简要地概括如下。

HTML 最初的草案 HTML 最早使用在欧洲核子能研究机构中，用来方便研究人员使用和共享文档。在 1991 年出现的关于 HTML 的最早的说明中，HTML 中共包含 22 个元素，其中的 13 个保留到了 HTML 4 中。由于 HTML 最初是用来描述科学文档的，这 22 个元素基本都是用来描述文档的结构的。比如 <a> 用来表示文档之间的超链接；<p> 表示文档中的段落；<h1>、<h2>、<h3>、<h4>、<h5> 和 <h6> 用来表示不同级别的标题。 HTML 2.0HTML 2.0 规范在 1995 年 11 月发布为 RFC 1866。2.0 规范中增加了 <img> 和与表单提交相关的 <form>、<input> 和 <select> 等元素。HTML 3.2HTML 3.2 规范在 1997 年 1 月作为 W3C 的推荐规范发布。正是在这个版本中，由 Netscape 和微软的 Internet Explorer 引入的很多与展示相关的元素被规范化。这些元素包括 <font>、<basefont>、<strong>、<strike>、<u>、<b> 和 <center> 等。这些元素使得 HTML 页面的结构与展示被杂糅在一起。HTML 4.01HTML 4.01 规范在 1999 年 12 月作为 W3C 的推荐规范发布，并于 2000 年 5 月成为国际标准。HTML 4.01 规范试图解决 HTML 3.2 规范中引入的与展示相关的元素的问题，与此同时，又需要考虑规范的向后兼容性。HTML 4.01 规范把许多与表示相关的元素标记为废弃的，不推荐使用。同时引入了三种“风格（flavor）”。在“严格（Strict）”风格中，废弃的元素是不能使用的；在“过渡性（Transitional）”风格中，废弃的元素是可以使用的；在“框架（Frameset）”风格中，只允许使用与框架相关的元素。HTML 5作为 HTML 规范的下一个版本，HTML 5 引入了更多富含语义的元素，如 <nav> 表示网站的导航栏，<section> 表示文档中的章节；与此同时，在 HTML 4.01 中被废弃的一些元素，如 <center> 和 <font> 等被移除了。

从上面列出的 HTML 规范的历史中可以看出，HTML 从仅包含表示文档结构的元素，到后来引入了与展示相关的元素，再到目前两者并存，以及下一个版本中展示相关的元素部分被移除。HTML 规范的发展趋势是与展示相关的元素将逐步消失。HTML 文档应该描述文档本身，而不应该描述文档如何展示给用户。HTML 规范的发展以一种螺旋式上升的方式实践着这个最初的目标。

富含语义的 HTML 与 CSS

在 HTML 中，与展示相关的元素的引入，主要是由于当时并没有好的方式来指明 HTML 文档中元素的样式。比如将一段文本用加粗或倾斜的字体来显示。在 CSS 广泛应用之前，只能通过 HTML 元素或属性来实现。由此引入了 <b> 和 <i> 这样的元素。随着 CSS 规范在浏览器中得到广泛的支持，Web 开发人员有了更好的方式来指明 HTML 文档中元素的样式。比如将一段文本加粗显示可以使用 CSS 语法 {font-weight : bold;} 来实现。正是由于 CSS 的出现与流行，富含语义的 HTML 实践才成为可能。

富含语义的 HTML 与 Ajax 应用

目前 Ajax 应用非常流行，越来越多的应用采用 Ajax 技术来提高自身的用户体验。Ajax 虽然是基于原有的 HTML、JavaScript 和 CSS 等技术，但是它重新定义了这三种技术在 Web 应用开发中的定位。一个典型的 Ajax 应用的结构如图 1 所示。

图 1. Ajax 应用的典型结构图

在图 1 中可以看到，Ajax 应用由三个部分组成，分别是结构、展示和行为。结构指的是应用的基本内容结构，由 HTML 来描述；展示指的是应用的外观，包括颜色、字体大小等样式，由 CSS 来描述；行为指的是应用与用户的交互，包括界面的部分刷新、处理与服务器端的交互等，由 JavaScript 来描述。在这三个部分中，由 HTML 描述的文档结构是整个 Ajax 应用的基础，CSS 通过各种选择器为文档应用样式，而 JavaScript 则通过 DOM 操作来修改文档结构。

富含语义的 HTML 为 Ajax 应用提供了描述结构的最佳方式。在开发 Ajax 应用时，从一系列富含语义的 HTML 文档出发，将为后面的开发打下良好的基础。HTML 规范中元素和属性众多，而富含语义的 HTML 的实践则推荐使用 HTML 规范中表示文档结构和富含语义的元素和属性。下面将详细介绍这些推荐使用的元素和属性，同时也会讨论那些不建议使用的与展示相关的元素和属性，并说明如何用 CSS 替换它们。