首页 HTML5 Dive Into HTML5:可扩展性(续二)

Dive Into HTML5:可扩展性(续二)

0 2.2K

标记组织

microdata 并不受限于一个词典。“关于”页面看起来不错,但你可能只有一个这种页面。想要更多吗?下面我们来看看如何标记组织和商业网站。

下面是一个简单的商业列表。我们来看一下不带有 microdata 的原始 HTML 标记的页面。

<article>
    <h1>Google, Inc.</h1>
    <p>
        1600 Amphitheatre Parkway<br>
        Mountain View, CA 94043<br>
        USA
    </p>
    <p>650-253-0000</p>
    <p><a href="http://www.google.com/">Google.com</a></p>
</article>

很简短,组织得也不错。所有的组织信息都在一个<article>元素中,那么我们就从这里开始吧!

<article itemscope itemtype="http://data-vocabulary.org/Organization">

就像前面我们介绍的标记人的方法一样,你需要在最外层元素上面设置itemscopeitemtype属性。在本例中,这个最外层元素是<article>itemtype属性声明你所要使用的 microdata 词典(也就是 http://data-vocabulary.org/Organization),itemscope属性声明将所有子元素都关联到这个词典上来。

那么,Organization 词典是怎样的呢?它很简单,一目了然。事实上,我们应该会觉得比较眼熟。

name组织名字(例如,Initech)
url组织主页链接
address组织地址。可以包含子属性 street-address、locality、region、postal-code 和 country-name
tel组织电话号码
geo位置的地理坐标,通常包含两个子属性,latitude 和 longitude

最外层的<article>元素的第一个子标记是<h1><h1>元素包含商业名称,所以我们直接给它itemprop="name"属性。

<h1 itemprop="name">Google, Inc.</h1>

根据 HTML5 microdata 数据模型,<h1>不需要特殊处理。microdata 属性值就是<h1>标签的文本内容。用我们日常用语来说,就是“组织的名字是‘Google, Inc.’”。

下一步是街道地址。标记一个组织的地址同标记一个人的地址是一样的。首先,向包含了街道地址的元素添加itemprop="address"属性(本例中是<p>)。这表明,这部分就是组织的地址。但是地址本身的属性怎么办呢?我们还需要定义itemtypeitemscope属性,用以说明这个 Address 项还有自己的属性。

<p itemprop="address" itemscope
   itemtype="http://data-vocabulary.org/Address">

最后,我们需要将这个信息的不同部分使用<span>元素分开,从而可以为每一个<span>元素添加合适的 microdata 属性(street-address、locality、region、postal-code 和 country-name)。

<p itemprop="address" itemscope
   itemtype="http://data-vocabulary.org/Address">
    <span itemprop="street-address">1600 Amphitheatre Parkway</span><br>
    <span itemprop="locality">Mountain View</span>,
    <span itemprop="region">CA</span>
    <span itemprop="postal-code">94043</span><br>
    <span itemprop="country-name">USA</span>
</p>

我们说,“这个组织有一个地址。街道部分是 '1600 Amphitheatre Parkway';地区是 'Mountain View';州是 'CA';邮编 '94043';国家是 'USA'”。

下一步,组织的电话号码。电话号码很有技巧性,其语法因国家不同而各异。(如果你想打国际长途,情况会更加糟糕。)本例中,我们有一个美国的电话号码,其格式对于美国所有地方都适用。

<p itemprop="tel">650-253-0000</p>

(不知道你注意到没有,在 <p> 元素关闭的时候,Address 词典已经超出范围了。现在,我们重新回到了 Organization 词典定义的范围。)

如果你需要多于一个的电话号码——可能一个给美国用户,另外一个给国际用户——当然也是可行的。任何 microdata 属性都可以重复。你所要做的,就是将每一个电话号码放进一个独立的 HTML 元素,从而将其彼此分隔开。

<p>
    US customers: <span itemprop="tel">650-253-0000</span><br>
    UK customers: <span itemprop="tel">00 + 1* + 6502530000</span>
</p>

根据 HTML5 microdata 数据模型,不管是<p>元素还是<span>元素都没有特殊处理。microdata tel 属性值就是其文本内容。Organization microdata 词典不会尝试分开一个电话号码的不同部分。整个 tel 属性都是格式自由的。你可以任意在段落中放入地址信息,或者是使用空格代替分隔线。如果有 microdata 使用者需要处理电话号码,它就会直接使用整个内容。

下一步,我们有一个熟悉的属性:url。就像将一个 URL 关联到一个 Person,你也可以将一个 URL 关联到一个组织。这个 URL 可以是公司主页、联系页面、产品页面,或者其他任何东西。如果一个 URL 是关于这个组织,或者来自这个组织,或者属于这个组织,那么都可以使用itemprop="url"属性。

<p><a itemprop="url" href="http://www.google.com/">Google.com</a></p>

根据 HTML5 microdata 数据模型,<a> 标记有特殊处理。microdata 属性值是 href 属性的值,而不是链接显示文本。于是我们可以说,“这个组织与 URL http://www.google.com/ 相关联。”它并没有说关于这个关联的更多的信息,也没有包含链接显示文本 Google.com。

最后,我们要谈一谈地理位置。不过,这并不是关于 W3C 地理位置 API。这次是有关如何使用 microdata 给一个组织标记物理位置的。

到目前为止,我们所有的例子都是关注于如何标记可视数据。也就是说,你的<h1>标签包含公司名字,于是你可以为这个<h1>增加 itemprop 属性,声明这个标记中的可视数据(就是文本)是这个组织的名字。或者你有一个指向照片的<img>标记,于是你为它增加了 itemprop 属性,声明这个图片是这个人的照片。

不过在这个例子中,地理位置信息并不像这样子的。我们并没有可视地给出这个组织的经纬度。事实上,整个页面都没有任何地理信息。我们可以做一个到 Google Map 的链接,但是即使 URL 也没有定义经纬度数据。即使我们打开页面,Google Map 也不可能使用 microdata 从 URL 中获取经纬度。

为了解决这个问题,HTML5 提供了一种声明不可视数据的方法。这种技术应该在万不得已时才去使用。如果有办法将你所需要的数据显示出来,那么就应当显示出来。仅供机器阅读的不可视数据很容易“过时”。也就是说,有人之后维护可视数据,却忘记更新不可视数据。这种情况经常发生,也很有可能会在你身上发生。

不过,有时候不可视数据真的不可避免。或许老板就是想要只有机器可读的地理位置信息,而不是想在页面上显示出来一对难看的6位数字。不可视数据就是唯一的选择了。唯一需要注意的是你可以将不可视数据直接放在可视数据后面,这可能能够提醒后面维护页面的人记得在更新可视数据的同时更新紧跟着的不可视数据。

在本例中,我们将在这个 <article> 元素中创建 <span> 元素,然后放入不可视的地理位置数据。

<span itemprop="geo" itemscope
      itemtype="http://data-vocabulary.org/Geo">
    <meta itemprop="latitude" content="37.4149" />
    <meta itemprop="longitude" content="-122.078" />
</span>
</article>

地理信息在其自己的词典中定义,就像地址一样。因此,这个<span>标记需要三个属性:

  1. itemprop="geo"说明这个元素用于表示外围的 Organization 的 geo 属性;
  2. itemtype="http://data-vocabulary.org/Geo"说明这个元素的属性所使用的 microdata 词典;
  3. itemscope说明这个元素封装了有自己词典 (由 itemtype 属性给出)的子元素。所有在这个元素内的属性都是 http://data-vocabulary.org/Geo 的属性,而不是外围的 http://data-vocabulary.org/Organization。

下一个大问题是,“如何声明非可视元素”?你可以使用<meta>元素。在早期版本的 HTML 中,你只能在<head>中使用<meta>。在 HTML5 中,你可以在任何地方使用<meta>元素。这就是我们现在要做的:

<meta itemprop="latitude" content="37.4149" />

根据 HTML5 microdata 数据模型,<meta>元素有特殊处理。microdata 属性值是其 content 属性的值。既然这个属性不会被显示出来,我们就可以为它设置不受限制的数据。不过所谓能力越大,责任越大。在这种情况下,其责任就是你必须确保非可视数据的值必须能够与包围它的说明文字一致。

Google Rich Snippets 没有直接支持 Organization 词典,所以我们也不用花费时间去找一个类似的应用页面。但是,组织特性通常在下面两个实例中很有用:事件和检查,而这两个是被 Google Rich Snippets 支持的。

发表评论

关于我

devbean

devbean

豆子,生于山东,定居南京。毕业于山东大学软件工程专业。软件工程师,主要关注于 Qt、Angular 等界面技术。

主题 Salodad 由 PenciDesign 提供 | 静态文件存储由又拍云存储提供 | 苏ICP备13027999号-2