Menu
I just wanted to know what is the HTML5 itemscope attribute used for basically?
567
Microdata is part of the WHATWG HTML Standard and is used to nest metadata within existing content on web pages. Search engines and web crawlers can extract and process microdata from a web page and use it to provide a richer browsing experience for users.
The itemprop global attribute is used to add properties to an item. Every HTML element can have an itemprop attribute specified, and an itemprop consists of a name-value pair. Each name-value pair is called a property, and a group of one or more properties forms an item.
The global attribute itemtype specifies the URL of the vocabulary that will be used to define itemprop 's (item properties) in the data structure. itemscope is used to set the scope of where in the data structure the vocabulary set by itemtype will be active.
itemscope is a boolean global attribute that defines the scope of associated metadata. Specifying the itemscope attribute for an element creates a new item, which results in a number of name-value pairs that are associated with the element.
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
itemscopeattribute specified. Theitemscopeattribute is a boolean attribute.An element with the
itemscopeattribute 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.
94
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
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
