《HTML5开发手册》——2.9 中级“菜谱”:利用Microdata添加语义信息

简介:

本节书摘来自异步社区《HTML5开发手册》一书中的第2章,第2.9节,作者: 【美】Chuck Hudson , 【英】Tom Leadbetter 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.9 中级“菜谱”:利用Microdata添加语义信息

Microdata规范为开发者带来了给某些内容添加标签的功能。从计算机看来,这些内容变得更友善、更易于理解。理论上,像Google这样的“机器”能够借助于Microdata返回更加准确的页面信息。

读者可以将Microdata视为某种自定义的元素。你可以使用它为商业、人、产品、事件等添加标签。由于不存在book元素,你可以为现存的元素添加Microdata属性来表示书籍。

Microdata包含5个属性:itemid、itemprop、itemref、itemscope和itemtype。代码2.15所示为一个描述人的简单示例。

代码2.15 Microdata示例


331389ab19e647322f7c848ab53112231290d005

代码2.15表示某个名为Tom Leadbetter,家住United Kingdom,在Space Cowboy公司工作,职位是Space Cowboy的人。

当为某个元素添加itemscope时,该元素便成为了Microdata项。itemprop代表这个Microdata项的一个属性,它描述了元素中的内容。示例中共有两个itemscope属性:一个代表整体(人)内容;另外一个代表地址内容。

你也可以使用自定义的命名方式,不过考虑到结果一致的问题,你应该使用标准的并可识别的命名。Google在提供了一些示例和建议。使用Google webmaster Rich Snippets Testing工具可检测你的Microdata,来查看Google如何在搜索结果页面中显示你的数据,如图2.6所示。


dbc54ff34e68f086f77cf75b928678437683ac85

图2.7显示了该页面中Google获取的其他信息。


d6164226de437ea6f9e7a3c7d8fef90f5cd89227

这仅仅是一个Microdata小例子,它还有很多有用选项。更多的例子请查看前面提到的Google网站。同样还有其他的一些工具可以在创建Microdata时提供帮助。

Schema.org还提供了一些应用范例以及大量的数据示例。。不过,开发者不久就可以在Microdata中使用了,并且我们相信schema.org应该是开发者查阅Microdata元素的最好网站。

注意:
Microformats和RDFa是另外两种扩展HTML来描述特定信息的方法。这两种方法各有优劣,我们并不想在此讨论对它们的选择。事实上,你可以在Microdata中加入Microformats。虽然Microdata规范正脱颖而出,而当前实际上更加流行采用Microformats。

相关文章
|
7月前
|
Java
有关Java发送邮件信息(支持附件、html文件模板发送)
有关Java发送邮件信息(支持附件、html文件模板发送)
450 1
|
数据采集 搜索推荐 前端开发
HTML语义化 —— 定义网页的语义
HTML语义化 —— 定义网页的语义
48 0
|
安全 Java Spring
【Java用法】Java 过滤html标签获取纯文本信息
【Java用法】Java 过滤html标签获取纯文本信息
230 0
|
2月前
|
移动开发 开发者 UED
HTML5 语义元素详解
HTML5引入了诸多语义元素
|
1月前
利用html2canvas插件自定义生成名片信息并保存图片
这是一个利用html2canvas插件自定义生成名片信息并保存图片,自定义上传头像,自定义输入个人信息内容,自定义图片名称,并将生成的图片保存到本地
38 1
利用html2canvas插件自定义生成名片信息并保存图片
|
18天前
|
Web App开发 移动开发 iOS开发
HTML5 语义元素1
HTML5引入了语义元素,如`<nav>`、`<header>`、`<footer>`等,这些元素能清晰地向浏览器和开发者传达其内容的意义,如导航链接、头部和尾部。与非语义元素(如`<div>`)不同,语义元素使网页结构更加明确,有助于提升可读性和可访问性。例如,`<section>`标签用于定义文档中的节,而`<article>`标签则用于定义独立的内容,如论坛帖子、博客文章等。这些新元素在IE9及更高版本、Firefox、Chrome、Safari和Opera中得到支持。
|
7月前
|
移动开发 前端开发 HTML5
HTML5实现酷炫个人产品推广、工具推广、信息推广、个人主页、个人介绍、酷炫官网、门户网站模板源码
HTML5实现酷炫个人产品推广、工具推广、信息推广、个人主页、个人介绍、酷炫官网、门户网站模板源码
|
3月前
|
移动开发 前端开发 数据挖掘
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图
|
4月前
|
移动开发 前端开发 UED
卡片翻转,故事展开:HTML+CSS动画让信息传递更生动!(含源码)
卡片翻转,故事展开:HTML+CSS动画让信息传递更生动!(含源码)
|
6月前
|
数据采集 移动开发 搜索推荐
HTML基础-HTML5新增语义标签:解锁网页结构新维度
【6月更文挑战第5天】本文介绍了HTML5的语义标签,旨在提升网页结构化和可访问性。核心语义标签包括`<header>`、`<nav>`、`<main>`、`<article>`、`<section>`、`<aside>`、`<footer>`、`<figure>`和`<figcaption>`。常见问题包括滥用标签作布局工具、忽略`<main>`、不恰当嵌套和忽视辅助功能。
118 3