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

Question

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.

Leave a Comment Cancel reply