HTML 结构化 – 编写高质量的 HTML 代码

怎样才能编写高质量的 HTML 代码 呢?相信是很多初学 HTML 的同学会产生的问题。实际上,我在刚接触前端开发,开始学 HTML 时(那时候大家还都在用 TABLE 标签布局)也是很迷茫的。买的参考书只会讲解具体的 HMTL 标签怎么使用,看完书倒是知道了 HTML 怎么用,但是怎么样的 HTML 才是高质量还是不得而知。

那到底什么样的 HTML 代码才是高质量的呢,有没有什么衡量标准吗?其实答案很简单,就是: HTML 代码要充分的结构化

那问题又来了,怎么样的 HTML 代码才是充分结构化的呢?回答这个问题之前,请让我来解释一下什么是 HTML 结构化?

HTML 结构化

HTML 结构化指的是使用语义化的 HTML 标签,根据 Web 标准书写具有清晰结构逻辑的 HTML 代码的一种思路。

HTML 结构化的检验标准

实际上在解释 HTML 结构化的时候,已经给出了检验标准的要点了:

  • 语义化的 HTML 标签;
  • 符合 Web 标准;
  • 清晰的结构逻辑;

语义化的 HTML 标签

语义化的 HTML 标签这个要点,实际上又可以分为两点:HTML 标签的语义语义化

HTML 标签的语义

HTML 标签是有语义(含义)的,不同的 HTML 标签,有着不同的含义。由于本文不是专门介绍 HTML 标签的,这里只给出了常用的 HTML 标签以及标签的描述:

标签 描述 DTD 标签 描述 DTD
<div> 定义文档中的节。 STF <span> 定义文档中的节。 STF
<h1> to <h6> 定义 HTML 标题。 STF <p> 定义段落。 STF
<strong> 定义语气更为强烈的强调文本。 STF <a> 定义锚。 STF
<img> 定义图像。 STF <blockquote> 定义块引用。 STF
<ul> 定义无序列表。 STF <ol> 定义有序列表。 STF
<li> 定义列表的项目。 STF <dir> 不赞成使用。定义目录列表。 TF
<dl> 定义定义列表。 STF <dt> 定义定义列表中的项目。 STF
<dd> 定义定义列表中项目的描述。 STF <menu> 不赞成使用。定义菜单列表。 TF
<form> 定义供用户输入的 HTML 表单。 STF <input> 定义输入控件。 STF
<textarea> 定义多行的文本输入控件。 STF <button> 定义按钮。 STF
<select> 定义选择列表(下拉列表)。 STF <optgroup> 定义选择列表中相关选项的组合。 STF
<option> 定义选择列表中的选项。 STF <label> 定义 input 元素的标注。 STF
<fieldset> 定义围绕表单中元素的边框。 STF <legend> 定义 fieldset 元素的标题。 STF
<table> 定义表格 STF <caption> 定义表格标题。 STF
<th> 定义表格中的表头单元格。 STF <tr> 定义表格中的行。 STF
<td> 定义表格中的单元。 STF <thead> 定义表格中的表头内容。 STF
<tbody> 定义表格中的主体内容。 STF <tfoot> 定义表格中的表注内容(脚注)。 STF
<col> 定义表格中一个或多个列的属性值。 STF <colgroup> 定义表格中供格式化的列组。 STF

DTD:指示在哪种 XHTML 1.0 DTD 中允许该标签。S=Strict, T=Transitional, F=Frameset.

标签 描述 标签 描述
<article> 定义 article。 <aside> 定义页面内容之外的内容。
<audio> 定义声音内容。 <canvas> 定义图形。
<embed> 定义外部交互内容或插件。 <footer> 定义 section 或 page 的页脚。
<header> 定义 section 或 page 的页眉。 <hgroup> 定义有关文档中的 section 的信息。
<nav> 定义导航链接。 <section> 定义 section。
<video> 定义视频。    

以上这些 HTML 标签的语义需要我们牢记,因为在编写语义化 HTML 代码的时候需要十分的清楚每个标签的含义,以保证能选择符合内容结构(含义)的 HTML 标签来展示。

语义化

在了解了 HTML 标签的语义后,接下来就要了解什么是语义化?以及为什么要语义化?先看看 Wikipedia 的定义吧:

Semantic HTML or semantic markup is HTML that introduces meaning to the web page rather than just presentation.

HTML 中的语义化 HTML 或语义化标记,指的是将(内容的)意义引入到网页中,而不仅仅是呈现。

语义化的关键就是上面说的“将(内容的)意义引入到网页中,而不仅仅是呈现”。也就是说语义化的 HTML 标签,需要根据内容的结构,选择合适的 HTML 标签来展示内容。而不是单纯的实现与内容外观看上去一样的显示效果。

举例来说,例如下面这样一个有序列表效果的内容:

1. 头部 head
2. 侧栏 side
3. 主体内容 main
4. 尾部 foot

正确的写法,采用语义化的 HTML 标签,就应该选择使用 <ol> 标签和 <li> 标签来实现。因为 <ol> 标签是用来定义有序列表,而 <li> 标签则是用来定义列表的项目。所以完整的语义化的 HTML 代码应该是这样的:

<ol>
    <li>1. 头部 head</li>
    <li>2. 侧栏 side</li>
    <li>3. 主体内容 main</li>
    <li>4. 尾部 foot</li>
</ol>

最后的效果:

  1. 头部 head
  2. 侧栏 side
  3. 主体内容 main
  4. 尾部 foot

可以看到,使用 <ol> 标签和 <li> 标签来实现这个有序列表,既将内容的意义引入到网页中(<ol> 标签就说明一下内容是有序列表,<li>标签说明内容是一个列表项),最终的显示结果也是一个标准的有序列表。我们不用手动为每一项添加序号,浏览器会自动为我们处理。

再来看看下面这段 HTML 代码:

<p>
1. 头部 head <br>
2. 侧栏 side <br>
3. 主体内容 main <br>
4. 尾部 foot 
</p>

它的显示效果:

1. 头部 head
2. 侧栏 side
3. 主体内容 main
4. 尾部 foot

虽然后面这段 HTML 代码在 浏览器中显示的效果看上去也是一个列表,但是这么写就只是仅仅实现了呈现效果,而不是一个符合当前内容结构的语义化 HTML 代码。因为 <p> 标签是用来定义段落的,而不是用来定义有序列表的。使用 <p> 标签 就没有将(内容的)意义引入到网页中。这么写就不是语义化的 HTML 代码。而且没增加一项我们都需要手动添加项目的序号。

相比之下,我们会发现语义化的 HTML 确实做到了既要追求呈现效果,也将内容的意义引入到网页中

为什么要语义化?

语义化的 HTML 之所以重要,就是因为语义化的 HTML 将内容的意义引入到网页中。这样一来,就能够同时让普通用户(顾客和开发者)、浏览器、爬虫(搜索引擎)、屏幕阅读器等其它浏览设备更好地阅读与解析页面的内容。它有以下几个优点:

  • 语义化的 HTML 页面对用普通用户来说(即使在没有 CSS 的情况下)能清晰地了解内容结构,便于用户浏览阅读;
  • 语义化的 HTML 页面有利于 SEO。对于爬虫(搜索引擎)也十分友好,能和爬虫建立良好沟通(因为爬虫需要依赖于 HTML 标签的语义来确定上下文和各个关键字的权重),从而有助于爬虫抓取更多的有效信息;
  • 语义化的 HTML 页面有更好的可访问性(Accessibility)。能方便其它设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页,对视力有障碍的用户更加友好;
  • 语义化的 HTML 代码可读性更好。便于开发人员(团队)开发和维护;

而在这些优点里,(个人认为)最关键就是语义化的 HTML 有利于 SEO。因为做好了 SEO,就意味着在不用增加任何资金投入的情况下,网站被用户发现的机会会增加,也就可以给网站带来更多的用户和访问量。而带来的这些用户又很有可能给网站的所有者带来更多的收入。

所以,充分的结构化的 HTML 代码一定是语义化良好的,是有利于 SEO 的。

符合 Web 标准

符合 Web 标准也是检验 HTML 结构化的一个重要标准。当然,这里说的 Web 标准,主要是指的 HTML 标准。因为遵循 W3C 的 Web 标准可以减少差异化,保证浏览器能够正确的解析 HTML 代码,正确的渲染(CSS 样式) Web 页面

要知道 HTML 标准发展到现在已经有很多版本了:

  • HTML 1.0 — 1993年6月发布,IETF 发布
  • HTML 2.0 — 1995年11月发布,RFC 发布
  • HTML 3.2 — 1996年1月发布,W3C 推荐标准
  • HTML 4.0 — 1997年12月发布,W3C 推荐标准
  • HTML 4.01 — 1999年12月发布,W3C 推荐标准
  • XHTML 1.0 — 2000年1月26日发布,W3C 推荐标准,后来经过修订于2002年8月1日重新发布
  • XHTML 1.1 — 2001年5月31日发布,W3C推荐标准
  • HTML 5.0 — 2014年10月28日发布,W3C 推荐标准

目前被广泛使用的应该就是 XHTML 和 HTML5 标准了。

DTD(文档类型定义)简介

不同的 HTML 标准有不同的 DTD(文档类型定义),而不同的 DTD 又定义了不同的 XML 文档的合法元素和标签的嵌套规则。

如果在 HTML 代码中使用了 DTD 中未定义的 HTML 标签,浏览器可能就不能正确解析这些标签了。而如果你使用了标准不允许的嵌套规则,你的 HTML 代码将无法通过 W3C 的 Markup Validation Service 校验的。

另外根据 HTML 标准的规定,DTD 声明必须位于 HTML 文档中的第一行,也就是位于 <html> 标签之前。就像这样:

<!DOCTYPE html>
<html lang="zh-CN" prefix="og: http://ogp.me/ns#">
...
</html>

XHTML 的 DTD(文档类型定义)

XHTML 1.1 标准有 Strict、Transitional、Frameset 3 种不同的 DTD:

1. 过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合XHTML的写法)。完整代码:

<!DOCTYPE html PUBLIC"_//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/ahtml1-transitional.dtd">

2. 严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如
。完整代码:

<!DOCTYPE html PUBLIC"_//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/ahtml1-strict.dtd">

3. 框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD。完整代码:

<!DOCTYPE html PUBLIC"_//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/ahtml1-frameset.dtd">

HTML5 的 DTD(文档类型定义)

HTML5 的 DTD 就只有一种,而且声明也很简单:

<!DOCTYPE html>

如何选择 DTD?

HTML5 的 DTD 是兼容 XHTML 的,只是 HTML5 中已经淘汰了 <frameset> 和 <frame> 标签。如果你确实需要使用框架页,就只能选择 XHTML 的 Frameset 的 DTD 了。如果不是,则推荐使用 HTML5 的 DTD 声明

怪癖模式(Quirks mode)

可以这么说,遵循 HTML 标准的第一步就是为 HTML 文档选择一个合适的 DTD 声明。而如果你忘记了给你的 HTML 文档添加 DTD 声明又会怎么样呢?

我想你是不希望这么做的,因为不使用 DTD,浏览器就会采用一种叫怪癖模式(Quirks mode)的方式解析 HTML 文档。

Quirks Mode is a mode of operation of web browsers such as Internet Explorer (IE), Firefox, and Opera. Basically, Quirks Mode (also called Compatibility Mode) means that a relatively modern browser in-ten-tio-nal-ly simulates many bugs in older brows-ers, es-pe-cial-ly IE 4 and IE 5.

怪癖模式是一种 Web 浏览器(如 IE、Firefox 和 Opera)的操作模式。简单来说,怪癖模式(也称为兼容模式)意味着一个相对较新的浏览器有意模仿旧浏览器中的许多错误,尤其是 IE 4 和 IE 5。

Quirks Mode is triggered by doctype sniffing, also known as doctype switching. This means that the browser inspects the start of an HTML document to see whether it con-tains a doctype declaration as re-quired by HTML specifications.

怪癖模式由 doctype 嗅探(也称为文档类型切换)触发。浏览器会检查 HTML 文档的开始位置,以确定是否包含 HTML 规范所要求的 doctype 声明(如果没有包含 doctype 声明,就会促发怪癖模式)。

From:jkorpela.fi

这个时候不同的浏览器就会出现很多的差异化,也不能保证浏览器能够正确的解析 HTML 代码和渲染(CSS 样式) Web 页面。具体的表现和影响可以参考下面的文章:

Web 标准相关的细节还有很多,不仅仅只有 DOCTYPE 声明和嵌套规则,本文也无法完全一一例举,如果你想确保写出来的 HTML 代码符合 Web 标准,建议选择一个《HTML 编码规范》 作为个人或者团队的编码规范。

清晰的结构逻辑

这个清晰的结构的判断标准有 4 个:

  1. HTML 代码要充分语义化;
  2. HTML 代码的嵌套要符合(Web 标准)规范;
  3. HTML 代码的嵌套层次尽量的少(理想状态,嵌套应该控制在4层以内);
  4. HTML 代码要便于扩展和复用;

语义化和符合 Web 标准上文已经介绍了,这里主要介绍后面两项:嵌套层次尽量的少,便于扩展和复用。

News Module Sample

接下来就以上图中的这个新闻模块为例来讲解,以便更好的理解如何实现有清晰的结构逻辑的 HTML 代码。

嵌套是越少越好吗?

嵌套层次尽量的少,那是不是嵌套越少越好?基本上这么说没有错。不过嵌套层次多少才合适还要把握一个前提条件,就是代码在便于扩展重用的情况下,嵌套是越少越好

来看看下面这两段代码:

<div class="news-md">
    <h2 class="news-title">头条</h2>
    <ul class="news-list">
        <li><a href="#1">亚冠-席尔瓦绝杀 浦和总比分2-1希拉尔夺冠</a></li>
        <li><a href="#1">他曾是哈登得力副将 来CBA领第1高薪却被裁</a></li>
        <li><a href="#1">颜丙涛破火箭最年轻决赛纪录 成中国第五人</a></li>
    </ul>
</div>
<div class="news-md">
    <div class="news-hd">
     <h2 class="news-title"><a href="">头条</a></h2>
 </div>
 <div class="news-bd">
     <ul class="news-list">
   <li><a href="#1">亚冠-席尔瓦绝杀 浦和总比分2-1希拉尔夺冠</a></li>
   <li><a href="#1">他曾是哈登得力副将 来CBA领第1高薪却被裁</a></li>
   <li><a href="#1">颜丙涛破火箭最年轻决赛纪录 成中国第五人</a></li>
  </ul>
 </div>
 <div class="news-ft"></div>
</div>

两段代码的语义化都做的不错(当然这个模块的结构比较简单),使用了 <h2> 标签标识表示栏目标题,使用 <ul><li> 表示这里显示的是一个(新闻)列表。第一段代码比第二段代码嵌套的层次结构更加少,是不是第一段代码结构更清晰啊?

毫无疑问,第一段代码确实要比第二段代码的结构更清晰简洁。不过在前面我们提到 HTML 代码还要 便于扩展和复用。如果页面中又包含了类似这样的新闻模块:

News Module

两个新闻模块外观基本上一致,就是后面的新闻模块标题栏更加复杂,第一种处理新闻模块的方式就无法胜任了,而两个新闻模块外观基本上一致,如果为两个模块单独写两个不同的 HTML 代码结构(使用不同的 CSS 样式)。这么做就违背 HTML 代码要便于扩展特别是便于重用的原则了。而这个时候,第二段代码的结构就可以很容易的实现在标题栏有标签页,又有热门词语的效果。看看调整后的代码:

<div class="news-md">
    <div class="news-hd">
        <ul class="news-hd-tabs">
            <li class="news-active-tab"><a href="#1">体育</a></li>
            <li><a href="#1">NBA/CBA</a></li>
        </ul>
        <p class="news-hot-keys"><a href="#1">综合</a>/<a href="">跑步</a>/<a href="">健身</a></p>
    </div>
    <div class="news-bd">
        <ul class="news-list">
             <li><a href="#1">亚冠-席尔瓦绝杀 浦和总比分2-1希拉尔夺冠</a></li>
             <li><a href="#1">他曾是哈登得力副将 来CBA领第1高薪却被裁</a></li>
             <li><a href="#1">颜丙涛破火箭最年轻决赛纪录 成中国第五人</a></li>
        </ul>
    </div>
</div>

很明显,虽然第二段代码嵌套层次更多,但它的扩展性更好。实际上层次也是十分清晰的,下面是我对分离出来的新闻模块的主体层次:

<!--新闻模块-->
<div class="news-md">
    <!--新闻模块标题栏-->
    <div class="news-hd"></div>
    <!--新闻模块标主体内容-->
    <div class="news-bd"></div>
    <!--新闻模块页脚-->
    <div class="news-ft"></div>
</div>

虽然多了一层嵌套,但是页眉(news-hd),主体内容(news-bd)和页脚(news-ft)每个小的模块(示例没有采用html5的标签,如果使用header,section,footer结构化就更清晰了)各司其职,却有更好的扩展性。可以这么说,清晰的结构逻辑追求的是在有良好扩展性前提下的尽量少的嵌套层次,而不单纯的追求最少的嵌套结构。如果为了更好的扩展,添加多一层的嵌套,这样的嵌套不但是必要的,而且会是让 HTML 代码结构更加清晰。

总结

说了那么多,最后让来总结一下,高质量的 HTML 代码应该是怎么样的:

  • 高质量的 HTML 代码是(充分)语义化的

    • 即使在没有 CSS 的情况下,用户也能清晰地了解内容结构,便于用户浏览阅读;
    • 对于爬虫(搜索引擎)也十分友好,有利于 SEO;
    • 能方便其它设备解析以意义的方式来渲染网页,有良好的可访问性(Accessibility);
    • 代码可读性良好,便于开发人员(团队)开发和维护;
  • 高质量的 HTML 代码是符合 Web 标准的

    • 使用了适当的 doctype 声明;
    • HTML 标签的嵌套规则符合所选 doctype 声明规则;
    • 遵循(使用)了被广泛认可的 HTML 编码规范;
  • 高质量的 HTML 代码拥有清晰的结构逻辑

    • HTML 代码是(充分)语义化的;
    • 便于扩展和复用;
    • HTML 标签嵌套层次深度合理(尽量的少,最好控制在 4 层以内);

以上就是我对编写高质量的 HTML 代码的一点经验总结,希望对刚接触编写 HTML 代码的朋友有所帮助,如果你觉得有什么不妥或者遗漏的地方,也欢迎留言交流。好了,就到这里吧。

SHARE THIS PAGE

免责声明:本站文章中的观点都是作者个人观点,并没有以任何方式反映他所属机构的意见。

发表评论