HTML5 what is the itemscope attribute and what does it do in laymans terms?
HtmlHtml Problem Overview
I just wanted to know what is the HTML5 itemscope attribute used for basically?
Html Solutions
Solution 1 - Html
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.
Solution 2 - Html
Search engines including Bing, Google, and Yahoo! are now using itemscope and friends to identify semantic data in webpages. On the website [schema.org][1], 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
[1]: http://schema.org "schema.org"