[ACCEPTED]-HTML5 what is the itemscope attribute and what does it do in laymans terms?-html

Accepted answer

Score: 71

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

It's defined in the HTML5 Microdata API:

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

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

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

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

It should also 9 be noted that [itemscope] and [itemprop] are compatible with 8 Facebook's Open Graph Protocol when providing meta data for 7 a webpage. The same metadata can be listed 6 for search engines, Facbook, and Google+ in 5 a single set of <meta> elements rather than having 4 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 3 that in the example, [itemscope] was added to the <html> element. This 2 means that any [itemprop] attributes in the <head> and <body> are 1 part of the WebPage item.

Score: 35

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

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

Source: stackoverflow.com

[ACCEPTED]-HTML5 what is the itemscope attribute and what does it do in laymans terms?-html

How to detect which one of the defined font was used in a web page?

Semantic value of span

ASP.NET Control to HTML tag equivalent

What is the best way to display HTML content on a Windows Form?

Why is my element with position:absolute always showing up underneath position:relative items?

What image type should I use when? GIF, JPG or PNG?

jQuery / Javascript replace <space> in anchor link with %20

fastest way to use css for html table without affecting another html table

css background image positioning (negative position?)

Creating heatmaps using <canvas> element?