谈谈对于 HTML 语义化的理解

于由Yaohaixiao发布

HTML 语义化应该算是一个比较老的话题了，讨论这个话题最活跃的时候应该是 2006 年左右的时候。在那个年代，国内才刚刚开始推广使用基于 W3C 的 Web 标准（主要指 CSS2.0 和 XHTML1.1 标准）开发制作 Web 页面。

感觉几乎是在一瞬间，所有国内的各大门户网站都先后开始使用 CSS + XHTML 技术对以前基于 TABLE 布局的 Web 页面进行了彻底的重构。也就是从那个时候起，国内的各个大小的互联网公司开始招聘专职的 Web 前端开发工程师。

那么，为什么使用 W3C 的 Web 标准开发 Web 页面会如此的受到业界的青睐，从而得到全面而迅速的推广的呢？采用 W3C 的 Web 标准开发 Web 页面相对以前 TABLE 布局的优势有哪些？

采用 W3C 的 Web 标准开发 Web 页面的优势

我个人的理解采用 W3C 的 Web 标准开发 Web 页面相对以前 TABLE 布局的优势主要有 3 点：

  1. 节约运营成本
  2. 对用户友好更友好
  3. 能够为站点带来更多的用户

优势1：节约运营成本

能帮我们省钱的东西，你会不会有兴趣？当然是十分的有兴趣了。特别是以盈利为目录的各个互联网公司，能够为公司节约运营成本，就是在为公司创造价值。那么，让我们来看看采用 Web 标准开发制作 Web 页面是如何做到这一点的？

采用 Web 标准开发制作 Web 页面，可以（也是要求）做到表现和形式的分离。即用 XHTML 来表现（显示）数据，用 CSS 来控制页面元素的呈现形式。

经过重构后的 Web 页面，HTML 文件中基本上都是用户要查看的数据，将原来混合在 TABLE 布局（table 标签）中的内嵌的 CSS 代码都剥离了出去。与此同时，同时移除了以前采用 TABLE 布局过多的不必要的TABLE 嵌套的代码，从而大大减小了 HTML 文件的体积。

而那些剥离出来的内嵌 CSS 代码，则全部保存到了独立的 CSS 文件中了。而在将内嵌的 CSS 样式代码保存到独立的 CSS 文件中后，又可以进一步将那些重复编写的内嵌 CSS 代码全部移除掉，只保留一份相同的样式控制代码片段。进过如此处理后，也减少了 CSS 文件的大小。

更重要的是，在使用独立 CSS 文件来控制所有的页面元素的样式后，现在想修改改调整网站的整体风格，只需要花几分钟修改一下某个 CSS 文件，就可以轻松搞定了，效率非常的高。而这在采用 TABLE 布局的页面时，修改站点整体风格对于大型门户网站来说，是极其耗费人力和时间的一件事情。非常，非常，非常地痛苦！

前后一对比，采用 Web 标准开发制作 Web 页面的人力资源的维护的成本要比以前低很多很多了，这也就给公司节约了运营成本的降低。是不是省了不少钱了吧？另外，那些体积减小后的 Web 页面，对于网络带宽的要求也降低了。我们可以拿一个大型门户网站首页来做个例子，比如网易的首页如果减少小 1KB，以网易的访问流量我们保守按每天 5000W 人次 PV 访问量，那么我们可以算算在带宽上大约就节省了多少流量？而且这些节省下来的带宽就可以满足更多用户的访问请求。这么一算，也不是也节约公司的运营成本啊？

不仅如此，页面的体积减小对用户而言，就意味着能更快的浏览页面，也就是节约了用户的时间（时间=金钱）和流量费用。同时提升了网站的用户体验。采用 Web 标准开发制作 Web 页面，是不是好处多多？

优势2：对用户友好更友好

接下来说说用户更友好。首先访问我们站点的用户分为两类：

  • 第一类：普通用户（每个访问我们网站的人）；

    • 第二类：搜索引擎；

采用 Web 标准开发的页面，要求结构清晰，页面体积小，浏览器兼容性好。普通用户访问的时候，页面打开速度也就更快，并且不管用户使用那种浏览器，都能够正常访问（显示）页面。而页面的结构清晰，就是用户可以很方便的了解页面（文章）的层次结构，可以很容易的找到想要查看的数据。即使是在没有 CSS 样式的情况下，也可以一样方便的查找到想要看的内容。

对访问网站的搜索引擎来说，一个好的采用 Web 标准开发的页面，都是 SEO 友好的。搜索引擎可以很容易理解你的页面结构，它可以清晰的知道哪里是标题（H1~H6标签），也可以很容易的分析出哪里是正文段落（p标签），并且可以很容易的分析出是正文段落里要强调的内容（strong 或者 em 标签）。

优势3：能够为站点带来更多的用户

一个 SEO 做得好的站点，被搜索引擎收录的机会也更多。这也意味着您的网站有机会被更多的普通用户搜索到，从而进入你的站点访问。最终给你的站点带来更多的用户，甚至在浏览你的站点后产生购买行为，从而给你带来实际的营收利润。

正是基于以上 3 点的优势，采用 W3C 的 Web 标准开发制作页面才得到如此全面而迅速的推广。如果你对使用 Web 标准重构网站的话题感兴趣，推荐阅读《网站重构—应用Web标准进行设计》这本书。

什么是语义化？

Tim Berners-Lee（万维网发明者）最早提出了语义网（Semantic Web）的概念。语义网的核心是通过给万维网上的文档（如HTML）添加能够被计算机所理解的元数据（Meta data），从而使整个互联网成为一个通用的信息交换媒介。

语义化简单讲就是根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

为什么要语义化？

我来看看 W3C 对语义网的期许：

传统的 Web 由文档组成，W3C 希望通过一组技术支撑“数据的 Web”，即 Web of Data，将 Web 看作一个存储和管理数据的大型分布式数据库。语义 Web 是构造这样的数据 Web 的重要一环，帮助人们创建数据并存储在 Web 上，创建相关的词汇表及数据的处理规则。 —— w3.org

W3C 有如此雄心为我们规划未来语义网，而语义网的基础就是合理布局，充分语义化的网页。这在前文介绍使用 W3C 的 Web 标准开发制作页面的优势时，其实也都离不开语义化的支持。例如对搜索引擎的友好，就与语义化有着直接的联系。

对搜索引擎友好 有利于 SEO

如果要你的 HTML 代码对搜索引擎友好，那么你的 HTML 代码就必须充分的语义化。因为搜索引擎爬虫依赖于语义化的 HTML 标签来确定上下文和各个关键字的权重。来看看我的一个示例页面：

它的 HTML 代码如下：

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Ajax标签导航实例详解</title>
    <link href="css /article.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body>
    <header class="header">
        <h1 class="logo">
            <a href="http://www.yaohaixiao.com/" target="_blank" title="海啸的地盘--享受生活，享受每一天！" rel="noopener">海啸的地盘--享受生活，享受每一天！</a>
        </h1>
        <section class="filter">
            <form name="frmsearch" id="frmsearch" action="" method="post">
                <label for="keyword">站内搜索：</label>
                <select class="topics" id="topics">
                    <option value="0">全部主题</option>
                    <option value="1">(X)HTML</option>
                    <option value="2">CSS</option>
                    <option value="3">Javascript</option>
                    <option value="4">XML</option>
                    <option value="5">ASP/ASP.NET</option>
                </select>
                <input type="text" name="keyword" class="keyword" id="keyword" value="请输入搜索关键字" maxlength="60" />
                <input type="reset" name="btnsearch" class="btn-search" id="btnsearch" value="开始搜索" />
            </form>
        </section>
        <nav class="naviagtion">
            <ul class="menu">
                <li><a href="/article">ARTICLES</a></li>
                <li><a href="/topics">TOPICS</a></li>
                <li><a href="/about">ABOUT</a></li>
                <li><a href="/content">CONTACT</a></li>
                <li><a href="/gestbook">GESTBOOK</a></li>
                <li><a href="/feed">FEED</a></li>
            </ul>
        </nav>
    </header>
    <section class="container">
        <article class="post">
            <h1 class="post-title">Ajax标签导航实例详解</h1>
            <div class="post-meta">作者/程序设计：<a href="yaohaixiaomailto:haixiao_yao@yahoo.com.cn">yaohaixiao</a> 来源：<a href="http://www.yaohaixiao.com" target="_blank" rel="noopener">yaohaixiao.com</a> 发布时间：2008年4月28日
            </div>
            <div class="post-body">
                <h2>代码篇</h2>
                <p>
                    之前整理发表了<a href="http://www.yaohaixiao.com/article.asp?id=44" target="_blank" rel="noopener">《XMLHTTPRequest的属性和方法简介》</a>,它Ajax要使用的核心的技术之一，现在就来实际运用它
                    。这个Ajax标签导航，是我很久前就写的一个脚本，很实用的（还被很多网站收录了哦），现在拿它来做实例讲解吧！当然个人能力有限，有什么不对的地方还请多包含!
                </p>
                <p>
                    演示地址：<a href="http://www.yaohaixiao.com/code/ajaxtab/index.htm" target="_blank" rel="noopener">http://www.yaohaixiao.com/code/ajaxtab/index.htm</a>
                </p>
                <p>效果大家看到了，核心功能有：</p>
                <ol>
                    <li>将当前选中标签以特殊的样式显示;</li>
                    <li>将异步加载的页面信息显示到指定的DOM节点中;</li>
                </ol>
                <p>
                    我们来看看处理脚本的代码吧：
                </p>
                <h2 class="code-title">程序代码：ajaxtab.js</h2>
                <pre class="js code" id="js-code">
<code>
// 判断是否支持ActiveX
var useActiveX=(typeof ActiveXObject != "undefined");
// 判断是否支持DOM
var useDom=document.implementation && document.implementation.createDocument;
// 判断是否支持XMLHttpRequest对象
var useXmlHttp=(typeof XMLHttpRequest != "undefined");
// XMLHttpRequest对象版本
var ARR_XMLHTTP_VERS = ["MSXML2.XmlHttp.6.0","MSXML2.XmlHttp.3.0"];
// DOM对象版本 
var ARR_DOM_VERS = ["MSXML2.DOMDocument.6.0","MSXML2.DOMDocument.3.0"];
</code> 
        </pre>
                <p>
                    我罗列的这些东西，相信大家开始看出了些头绪了，呵呵，不过别急！在我们看处理的脚本之前，先让我们来看看导航标签的样式，主要是看看我们对分割线的处理(一点CSS处理的技巧)。
                </p>
            </div>
        </article>
    </section>
    <footer class="footer">
        <p id="copyright">
            Copyright &copy; 2007-2008
            <a href="yaohaixiao.comhttp: //www.yaohaixiao.com">yaohaixiao.com</a>, All rights reserved. Powered By:
            <a href="Yaohaixiaomailto:haixiao_yao@yahoo.com.cn">Yaohaixiao</a>
        </p>
    </footer>
    <script language="javascript" type="text /javascript" src="js/common.js"></script>
</body>
</html>

而搜索引擎查看到的页面就类似这种没有任何 CSS 修饰的显示效果：

界面看上去虽然不是那么漂亮，对搜索引擎来说却是非常友好的。搜索引擎分析我们的页面结构就是通过 header、footer、section 和 article 这样的标签来做出分析结果的。因为这些 HTML 标签都有着各自的语义：

  • header 标签区域用来显示页面的页头导肮部分；
  • section 标签区域用来显示页面的主要内容；
  • footer 标签区域用来显示页面的页脚部分内容；

而至于分析文章段落的层次结构，就是通过分析页面中 h1-h6 标签和 p 标签获取到分析的。因为 h1~h6 的语义就是这里展示的是标题，而 1~6 的数值，则表明了标题之间的层次结构。p 标签则是表示的这些标题之间的正文段落。

而对于普通用户来说，去掉了样式页面的也依旧结构清晰，可以很方便查阅页面中的文章内容。到这里大家应该能体会到有充分语义化，有着清晰面层次结构的页，也就是前文提到使用 W3C 的 Web 标准开发页面，是如何做到对普通用户和搜索引擎都友好的了吧？

清晰的页面结构

前面展示了搜索引查看 Web 页面的效果，而做到去掉或样式丢失的时候，也能让页面呈现清晰的结构，增强页面的可读性。也就是所谓有清晰的页面结构。这也是充分语义化要求达到的效果。

还是以示例页面为例，页面的 HTML 代码里基本上都是用户要看的数据，其中只包含了很少（必要）的布局(XHTML)标签（请允许我这么说），充分体现了表现和形式的分离。整个页面被 header、section、article、footer 这几个主要的标签将页面划分层了 3 大块。

这个页面结构是不是足够的清晰了？再仔细看看各个主要区域用于布局的 HTML 标签的嵌套层次也控制在了 4 层之内，绝大多数都只有 3 层嵌套。因为页面的 HTML 标签嵌套层次越潜，页面结构就越清晰，浏览器在解析 HTML 代码的时候效率也会越高。所以清晰的页面结构的 HTML 代码的标签嵌套层次深度要尽量的少，最好控制在 4 层以内。

合理的使用语义化的标签

本文中反复提到，每个 HTML 标签都是有着自己所代表的语义。所以语义化的关键，就是合理的使用语义化的标签来显示相应结构的数据。还是以示例代码为例：

<header class="header">
<!--其它代码-->
</head>

页面的页头就应该使用 <header>，因为 <header> 的语义就是表示页头或者页面头部区域。

而页头区域中的导航代码，则使用代表导航语义的 <nav/> 标签：

 <nav class="naviagtion">
            <ul class="menu">
                <li><a href="/article">ARTICLES</a></li>
                <li><a href="/topics">TOPICS</a></li>
                <li><a href="/about">ABOUT</a></li>
                <li><a href="/content">CONTACT</a></li>
                <li><a href="/gestbook">GESTBOOK</a></li>
                <li><a href="/feed">FEED</a></li>
            </ul>
        </nav>

再看正文部分，文章的大标题，则使用了代表标题的 <h1> 标签。而正文的文章主题，则使用了 <article> 标签，将整个文章正文区域包裹起来，表示出正文区域的启示位置：

<article class="post">
    <h1 class="post-title">Ajax标签导航实例详解</h1>
    <!--其余代码-->
</article>

最后是页脚，页脚区域则使用了 <footer/> 标签，因为 <footer> 标签就代表它是用来表示页脚区域的。

<footer class="footer">
        <p id="copyright">
            Copyright &copy; 2007-2008
            <a href="yaohaixiao.comhttp: //www.yaohaixiao.com">yaohaixiao.com</a>, All rights reserved. Powered By:
            <a href="Yaohaixiaomailto:haixiao_yao@yahoo.com.cn">Yaohaixiao</a>
        </p>
</footer>

除了页面主体框架使用了相应的语义化标签来显示。文章正文部分的细节也应该注意使用语义化的标签。

文章正文的次标题，就使用了 h2~h6 标签，用来表明文章的段落层次结构。而文章段落的介绍文字，就使用 p 标签来展示展示。正文中的无顺序的列表，就选择了 ul 标签来展示数据。依此类推，这里就不再逐个介绍每个 HTML 标签的语义了。

总之，就是合理的使用语义化的标签来显示相应结构的数据，充分的做到语义化。

结束语

当然，每个人对语义化的理解都有所不同，而且语义化也不仅仅只包含我前面提到的那些要素，撰写本文的初衷是希望能够对初学 HTML 的朋友理解 HTML 语义化有所帮助，希望通过阅读完本文，能够对 HTML 语义化有一个基本的理解和认知。如果想了解怎样的 HTML 代码才是漂亮的代码，推荐阅读《What Beautiful HTML Code Looks Like》，文章中介绍了更多的一些编写漂亮 HTML 代码的规则。

至于针对不同的数据展示结构，如何选择相应语义的 HTML 标签，如何构建页面结构。我会在以后专门介绍实战技巧的文章来做具体介绍。本文主要的目的是跟大家介绍什么是语义化和语义化包含的基本要素，以及应该达到效果。

分类： Blog
标签：

相关文章

理解 JavaScript 中的继承

继承应该是面向对象编程中讨论最多的话题之一了。绝大多数的面向对象（Ob 阅读更多…

JavaScript 中的事件委托

JavaScript 中一个重要的方法就是事件委托（又叫事件代理）。事 阅读更多…

认识 HTTP 首部字段

在《认识 HTTP 报文》一文中介绍过一些 HTTP 首部字段的内容， 阅读更多…