开发者

HTML5 what is the itemscope attribute and what does it do in laymans terms?

I jus开发者_开发知识库t wanted to know what is the HTML5 itemscope attribute used for basically?


The [itemscope] attribute is a boolean attribute to define the scope of the metadata contained within the element.

It's defined in the HTML5 Microdata API:

Every HTML element may have an itemscope attribute specified. The itemscope attribute is a boolean attribute.

An element with the itemscope attribute specified creates a new item, a group of name-value pairs.

In other words, it's a way of associating metadata with a particular DOM node.

This is used by the Schema.org API to associate data for search engines and social networks. Google+ uses schema as the way to provide titles, thumbnails, and descriptions for pages shared by users.


It should also be noted that [itemscope] and [itemprop] are compatible with Facebook's Open Graph Protocol when providing meta data for a webpage. The same metadata can be listed for search engines, Facbook, and Google+ in a single set of <meta> elements rather than having to list the same information more than once:

<html itemscope itemtype="http://schema.org/WebPage" xmlns:fb="https://www.facebook.com/2008/fbml">
  <head>
    <title>An Example Title</title>
    <meta content="An Example Title" itemprop="name" property="og:title" />
    <meta content="Lorem ipsum dolor sit amet" itemprop="description" name="description" property="og:description" />
    <meta content="http://www.example.com/image.jpg" itemprop="image" property="og:image" />
    <meta content="http://www.example.com/permalink" itemprop="url" property="og:url" />
    <link rel="canonical" href="http://www.example.com/permalink" />
  </head>
  <body>
    ...content...
  </body>
</html>

Note that in the example, [itemscope] was added to the <html> element. This means that any [itemprop] attributes in the <head> and <body> are part of the WebPage item.


Search engines including Bing, Google, and Yahoo! are now using itemscope and friends to identify semantic data in webpages. On the website schema.org, they have an explanation of how to use itemscope with predefined schemas to improve the data that is provided to search engines.

http://schema.org/docs/gs.html

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜