上面介绍的这些元素和属性，为编写富含语义的 HTML 文档提供了最基础的构建元素。除此之外，在编写富含语义的 HTML 文档时，还有很多不错的最佳实践可以参考。运用这些实践，将可以从更加宏观的角度来看待富含语义的 HTML。下面将具体介绍这些实践。
最佳实践在编写富含语义的 HTML 文档时，有一些比较好的做法可以借鉴。遵循这些做法，将帮助避免很多常见的问题。这些好的实践包括在编写 HTML 文档之前需要选用合适的 DTD，编写完成之后需要验证 HTML 文档的语法，在编写过程中需要选用适合的元素和 class 属性来表示语义等。下面将具体介绍如何在具体的 HTML 文档编写过程中应用这些最佳实践。
选用合适的 DTDHTML 文档中的文档类型声明（Document type declaration，DTD）用来声明该文档所使用的 HTML 规范的版本。该声明可以帮助浏览器确定如何显示该文档。目前主流的 HTML 规范版本是 4.01，同时 HTML 4.01 提供三种风格，因此比较常用的 HTML 文档类型声明有 中所示的三种。
表 3. HTML 4.01 规范对应的 DTD 说明文档类型 文档类型声明 说明
HTML 4.01 严格型 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 不允许使用废弃的与展示相关的元素与属性
HTML 4.01 过渡型 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 可以使用所有元素和属性
HTML 4.01 框架型 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> 可以使用与框架相关的元素和属性
对于富含语义的 HTML 文档来说，通常来说是不应该使用与展示相关的元素与属性的。因此，HTML 4.01 严格型的文档类型声明是最适合的。不过有些文档结构语义，只使用 HTML 4.01 严格型中规定的元素和属性的话，是无法实现的。（关于这一点的具体说明，见 ）。综合来说，比较好的折衷方案是使用 HTML 4.01 过渡型的文档类型声明，但是在文档中避免使用废弃的元素和属性。如果可以确定 HTML 4.01 严格型中规定的元素和属性已经足够的话，使用该类型的文档类型声明是最好不过的选择。
需要说明的是，目前的浏览器都有很强的容错性和向后兼容性。因此，即便没有正确的声明文档类型，浏览器也能正确的显示。但这并不意味着可以放弃使用正确的文档类型声明。
验证你的 HTML在选择好了文档类型声明之后，另外一个必须要做的步骤是使用 HTML 语法验证器来验证 HTML 文档。W3C 提供了一个 HTML 文档验证器。（见 ）。该验证器可以根据 URL 来验证，也可以验证用户上传的 HTML 文件或是直接输入的 HTML 代码。该验证器会根据文档的类型声明进行校验，并给出详细的信息。可以根据验证的结果进一步的修改 HTML 文档。 中给出了对一段不符合 HTML 4.01 严格型语法的 HTML 文档进行验证的结果。
图 2. 使用 W3C HTML 语法验证器的结果
中的 HTML 文档在 <ol> 元素中使用了属性 start，因此不符合 HTML 4.01 严格型规范。如果改成 HTML 4.01 过渡型的文档类型声明就是合法的。
使用合适的元素HTML 4.01 规范中提供了不少语义丰富的元素，应该把这些元素应用在适合其语义的地方。大多数 Web 开发人员对于常用的 HTML 元素比较熟悉，使用也较多。对于一些不太常见的元素则很少使用，而用其它元素来代替。比如 <div> 和 <span> 就在很多情况下被用来代替其它元素。虽然将 <div> 和 <span> 和 CSS 相结合，都可以达到预期的显示效果，但是这样会削弱文档本身的语义。 和 中给出两种 HTML 文档的写法。 中使用 <span> 元素，并通过 class 属性为 header 来表明该 <span> 元素的语义是“标题”。这种情况下，采用 中给出的做法，使用 HTML 规范提供的 <h3> 元素会更合适。因为 <h3> 本身就已经包含了“标题”的语义，就不需要再通过 class 属性来说明了。
清单 1. 错误的 HTML 元素选择<style> .header { font-size : 1.2em; } </style> <div/> <span> 标题 </span> <div> 内容 </div> </div>
清单 2. 正确的 HTML 元素选择<div/> <h3> 标题 </h3> <div> 内容 </div> </div>
避免错误的元素使用对于 HTML 中的元素，浏览器会有默认的展示样式。比如 <blockquote> 元素，通常来说浏览器会以缩进的方式来显示其中被引用的文本；而 <em> 元素，浏览器则会把其中的文本显示为斜体。这种默认的展示样式会造成一种错误的元素使用方式，即为了达到某种展示效果而使用该元素，而忽略元素本身的语义。比如希望将一段文本以缩进的方式显示，就使用 <blockquote> 元素，即使该段文本并非是引用自外部文档的。
这种方式的问题在于过分依赖于浏览器的默认样式而忽视元素的语义。一旦浏览器的默认样式发生变化或是被其它 CSS 样式所修改，原本预期的展示效果就无法实现。
使用富含语义的 class 属性HTML 元素的 class 属性为使用 CSS 来修改元素的样式提供了切入点。一个好的 class 属性可以为已有的 HTML 元素增加语义。比如 <h1> 中，<h1> 本身的语义是表示标题，而通过使用 important 这样一个 class 属性的值，进一步说明该标题是比较重要的。可以通过 CSS 为该标题添加加粗、不同的颜色等样式来突出该语义。对于类似 <div> 和 <span> 这样并没有附加语义，而只是单纯作为容器使用的 HTML 元素来说，好的 class 属性可以为其添加语义。比如 <div>，通过 class 属性就为该 <div> 添加语义，说明其表示的是一段摘要。
一个好的 class 属性值应该要说明其对应的 HTML 元素的作用，而不应该说明该元素的展现样式。由于 class 属性会在 CSS 中作为选择器来使用，因此很容易就误用一些表示展现样式的名称。比如 redTextBlueBorder 这样的名称，虽然清晰的描述了其展现样式是红色文字加上蓝色边框，但是并没有描述元素的作用，是不好的名称。如果需要对样式进行修改，比如改成蓝色文字加上红色边框，那么名称也需要相应的修改，变成 blueTextRedBorder。一个好的名称，在所描述的元素的作用没有变化时，即便展现的样式发生改变，就不需要修改。
绕开“灰色地带”
相关文章
精彩导读
热门资讯
关注我们
