谈谈对于 HTML 语义化的理解

于由Yaohaixiao发布

在《Web 标准开发 Web 页面的优势》一文中介绍了为什么使用 Web 标准开发页面。今天要再跟大家谈谈对于 HTML 语义化的理解。和 Web 标准一样，HTML 语义化也应该算是一个比较老的话题了。不过作为一名前端开发工程师，是必须充分的理解语义化的。因为只有理解了语义化，才能写出更加优秀的 HTML 代码，而一个优秀的 HTML 代码是前端开发的基础，这也是我为什么要和大家聊聊这个问题的原因。

什么是语义化？

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 首部字段的内容， 阅读更多…