IFE-NOTE：文本级语义化

Posted on Apr 12, 2016

前面谈到的语义化是针对页面结构的，而对于文本级别的信息，同样可以语义化。通常，如果要为所有的语义信息单独规定标签，那么这样的标签会数不胜数，毕竟世界上的数据类型太多了。HTML5 的做法是扩展了一些文本级语义化标签，然后也通过微数据等规范给了开发者定义更详细数据格式的自由。这篇文章首先讨论 HTML5 中的文本级别的语义化标记，然后谈谈一些扩展的语义标准。

文本级语义化标签

<time> 标注日期和时间。通过它可以标注日期、时间或时间和日期的组合。日期格式类似 YYYY-MM-DD HH:MM 的形式，但通过在 datetime 属性中提供标准日期格式，时间日期可以用任何形式来表示。如：

1	玛雅预言的世界末日为<time datetime="2012-12-21">二〇一二年年十二月二十一日</time>。

此外，<time> 元素还有一个尚在讨论中的 pubdate 属性，尚未被任何浏览器支持。用于表示文档或与其最近的 <article> 的发布时间。

<output> 元素标注 Javascript 返回值。通常在以前的页面中显示 Javascript 计算结果时，会使用一个占位符，并操纵 DOM 显示结果。但并没有任何语义，<output> 标签给定了这种行为语义上的支持。该标签的附加属性有三个。form 属性指定与当前标签有关联的 form。该属性的值必须为当前文档内的表单元素的 ID。当未指明该属性时，<output> 标签必须为一个 form 的后代标签。for 属性规定影响计算结果标签的 ID。可以为多个，用空格分开。

使用示例MDN

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="range" name="b" value="50" /> +
    <input type="number" name="a" value="10" /> =
    <output name="result"></output>
</form>

<mark> 标签用于标记突出显示的文本。在普通浏览器下看起来是这样的：这是使用了突显标记的文本。

ARIA

ARIA(Accessible Rich Internet Application) 是一个还在制定中的标准，它规定了在任意 HTML 元素上使用的属性，通过这些属性来为屏幕阅读器等设备提供额外的信息。常用的方式是为元素设置一个 role 属性，来表示元素的用途。

1 2	<div class="header" role="banner">' </div>

下面是一张来自 W3C 的关于 Roles 的种类图（新窗口打开查看原图），可见其种类繁多。

种类繁多的 Roles

完整的 role 名称列表可以参考：https://www.w3.org/TR/wai-aria/roles#landmark_roles

MDN 关于 ARIA 的详细介绍及使用：https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA

恰当的使用 ARIA 标准可以建立出一个完全的无障碍访问的网站，同时必须兼顾 HTML5。因为 HTML5 的新标签恰恰已经在 ARIA 中规定了同样的词。

RDFa

RDFa(Resource Description Framework) 也是一种使用属性向网页中嵌入详细信息的标准。维基百科指出了 RDFa 的优点：

RDFa达成了五个“可交互利用的元数据的条件”。
出版者的独立性 – 每个网站可以用自己的标准
重复使用数据 – 数据不会被复制成两份。对于同样的内容，不需要有非别的XML跟HTML的部分。
自我包含 – HTML与RDF是分开的
文法模块化 – 那些属性可以被重复使用
可演化性 – 可以加更多的属性，且XSLT可以从一个XHTML档里萃取出数据
另外RDFa可以增进一个网页的网页亲和力，毕竟辅助科技软件可以使用更多的机械可读数据。
RDFa维基百科

微格式

微格式通过附加在通常用于添加样式的 class 属性上。根据数据的类型，使用某些标准的样式名来标注数据。

微格式的详细参考：http://microformats.org/wiki/Main_Page-zh

微数据

采用微数据，相比微格式，它使用自己的属性，而不会使用 class 来和样式进行混淆。

微数据收录网站：http://schema.org/ 可以看到各种微数据格式和示例。下面展示了一个来自其网站的示例。

微数据示例schema.org

<!-- Before -->
<div>
 <h1>Avatar</h1>
 <span>Director: James Cameron (born August 16, 1954)</span>
 <span>Science fiction</span>
 <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

<!-- After -->
<div itemscope itemtype ="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <div itemprop="director" itemscope itemtype="http://schema.org/Person">
  Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954</span>)
  </div>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

如你所见，应用微数据后内容“臃肿”了不少，是否使用微数据，使语义和简洁达到一个平衡是在使用微数据时需要考虑的。

每一种微数据都需要一个命名空间，上面的示例中，tiemtype = "http://schema.org/Movie" 表现了来自 schema.org 的命名空间。http://schema.org/docs/full.html 展示了一个非常庞大的微数据类型列表。这些词汇表展现了得到微软、雅虎、谷歌和 Yandex 支持的命名空间。使用其中的信息可以确保可以为以上的搜索引擎所理解。

使用微数据提供的好处是很明显的，举个例子，在谷歌中搜索 2015 国民料理黄焖鸡米饭，可以在结果列表中看到这样的条目。

搜索得到带有评分信息的条目

查看源码，可以得到，这一切都是微数据在起作用。

带微数据的网页源码

谷歌给出了对元数据支持的参考文档：http://tinyurl.com/GoogleRichSnippets

为了方便开发，谷歌提供了 Structured Data Testing 来帮助开发者使用微数据。它帮你验证语义标记，并显示这些数据对搜索结果的扩展。

同样的，必应使用 Bing Markup Validator 处理元数据。

微数据的使用看起来要费一番精力且是繁琐的，通过 http://schema-creator.org/ 提供的工具可以很方便的生成所需要的微数据。

通过使用微数据，给出了我们通过搜索引擎整理信息的无限可能。目前火热的新闻，Bing 搜索引擎支持执行代码。下面是演示用Java进行快排的GIF。

搜索结果可执行代码

或许在某一天，通过语义化元素，搜索引擎检索到我们网站上的代码，也可以像这样运行呢！

对微数据的更为详细的使用可以参考张鑫旭大神的博文：HTML5扩展之微数据与丰富网页摘要

语义化是未来的 Web 主流，它提供了无障碍访问、搜索引擎的扩展还有快速检索元数据的可能，为用户提供了更为有效的获取信息的方式。

参考

HTML ife 前端语义化