IFE-NOTE:文本级语义化

前面谈到的语义化是针对页面结构的,而对于文本级别的信息,同样可以语义化。通常,如果要为所有的语义信息单独规定标签,那么这样的标签会数不胜数,毕竟世界上的数据类型太多了。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
1
2
3
4
5
<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达成了五个“可交互利用的元数据的条件”。

  1. 出版者的独立性 – 每个网站可以用自己的标准
  2. 重复使用数据 – 数据不会被复制成两份。对于同样的内容,不需要有非别的XML跟HTML的部分。
  3. 自我包含 – HTML与RDF是分开的
  4. 文法模块化 – 那些属性可以被重复使用
  5. 可演化性 – 可以加更多的属性,且XSLT可以从一个XHTML档里萃取出数据

另外RDFa可以增进一个网页的网页亲和力,毕竟辅助科技软件可以使用更多的机械可读数据。

微格式

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

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

微数据

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

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

微数据示例schema.org
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 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 主流,它提供了无障碍访问、搜索引擎的扩展还有快速检索元数据的可能,为用户提供了更为有效的获取信息的方式。

参考

  1. 《HTML5:The Missing Manual》
  2. HTML5 元素参考
  3. RDFa-维基百科
  4. HTML5扩展之微数据与丰富网页摘要
本博客所有文章除特别声明外,均采用 CC BY-NC-ND 4.0 许可协议。转载请注明出处! © 雨落
  1. 1. 文本级语义化标签
  2. 2. ARIA
  3. 3. RDFa
  4. 4. 微格式
  5. 5. 微数据
  6. 6. 参考