Skip to content
html.sh

itemscope - Create Microdata Item

The itemscope Attribute

Section titled “The itemscope Attribute”
Global Attribute HTML5

The itemscope attribute creates a new item in HTML Microdata, defining a scope for structured data that search engines and other tools can extract and understand. It works together with itemtype and itemprop to provide semantic meaning to your content.

Quick Example

Section titled “Quick Example”
Result

Syntax

Section titled “Syntax”
<element itemscope>
  <!-- Item properties go here -->
</element>

Or combined with itemtype:

<element itemscope itemtype="vocabulary-url">
  <!-- Item properties go here -->
</element>

How It Works

Section titled “How It Works”

The itemscope attribute creates a container for a structured data item. Once defined, all properties within that scope are described using the itemprop attribute.

Key Concepts:

itemscope creates a boundary: Everything inside the element with itemscope becomes part of that item’s data.

Properties use itemprop: Child elements use itemprop to define specific properties of the item.

itemtype defines the vocabulary: The optional itemtype attribute specifies what kind of thing you’re describing (using a URL to a vocabulary like schema.org).

<div itemscope itemtype="https://schema.org/Book">
  <span itemprop="name">The Great Gatsby</span>
  <span itemprop="author">F. Scott Fitzgerald</span>
</div>

Common Use Cases

Section titled “Common Use Cases”

Person Schema

Section titled “Person Schema”
Result

Product Schema

Section titled “Product Schema”
Result

Organization Schema

Section titled “Organization Schema”
Result

Event Schema

Section titled “Event Schema”
Result

Article/BlogPosting Schema

Section titled “Article/BlogPosting Schema”
Result

Combining with itemtype

Section titled “Combining with itemtype”

The itemtype attribute specifies the vocabulary for the item. The most common vocabulary is schema.org, which provides hundreds of types for different kinds of content.

<div itemscope>
  <span itemprop="name">Product Name</span>
  <span itemprop="price">$29.99</span>
</div>

The item has properties, but search engines don’t know what kind of thing it is.

Nested Items

Section titled “Nested Items”

You can nest items within items to represent complex relationships:

Result

In this example, the Restaurant item contains nested Address and Review items, which themselves contain nested Person and Rating items.

SEO Benefits

Section titled “SEO Benefits”

Rich Snippets in Google

Section titled “Rich Snippets in Google”

When you properly implement Microdata with itemscope, Google and other search engines can display enhanced search results:

Person: Contact information, social profiles, job titles

Product: Prices, availability, ratings, reviews

Recipe: Cooking time, ratings, calories, images

Event: Dates, locations, ticket availability

Organization: Contact details, logo, social profiles

Article: Author, publish date, headline, featured image

Review: Star ratings, author, review date

FAQ: Question and answer pairs

Example of what search engines can extract:

<div itemscope itemtype="https://schema.org/Recipe">
  <h2 itemprop="name">Chocolate Chip Cookies</h2>
  <img itemprop="image" src="cookies.jpg" alt="Cookies">


  <p>By <span itemprop="author">Jane Baker</span></p>
  <p>Prep: <time itemprop="prepTime" datetime="PT15M">15 min</time></p>
  <p>Cook: <time itemprop="cookTime" datetime="PT12M">12 min</time></p>


  <div itemprop="aggregateRating" itemscope
       itemtype="https://schema.org/AggregateRating">
    Rated <span itemprop="ratingValue">4.8</span>/5
    (<span itemprop="reviewCount">324</span> reviews)
  </div>
</div>

This can appear in search results with star ratings, cooking time, and an image.

Microdata vs JSON-LD

Section titled “Microdata vs JSON-LD”

There are two main ways to add structured data to web pages: Microdata (using itemscope) and JSON-LD (JavaScript Object Notation for Linked Data).

<div itemscope itemtype="https://schema.org/Book">
  <h1 itemprop="name">To Kill a Mockingbird</h1>
  <p>Author: <span itemprop="author">Harper Lee</span></p>
  <p>ISBN: <span itemprop="isbn">978-0-06-112008-4</span></p>
  <p>Published: <time itemprop="datePublished">1960-07-11</time></p>
</div>

Pros: Inline with HTML, easier to maintain, visible content is structured

Cons: More verbose, mixed with presentation markup

Testing Your Microdata

Section titled “Testing Your Microdata”

Before deploying, test your structured data to ensure it’s correctly implemented:

Google Rich Results Test

Section titled “Google Rich Results Test”

URL: search.google.com/test/rich-results

Paste your URL or HTML code to see what rich results Google can generate from your Microdata.

Schema Markup Validator

Section titled “Schema Markup Validator”

URL: validator.schema.org

Validates your markup against schema.org specifications and shows detected items and properties.

Testing Example

Section titled “Testing Example”
<!-- Test this markup -->
<div itemscope itemtype="https://schema.org/LocalBusiness">
  <h1 itemprop="name">Joe's Coffee Shop</h1>
  <div itemprop="address" itemscope
       itemtype="https://schema.org/PostalAddress">
    <span itemprop="streetAddress">123 Main St</span>
    <span itemprop="addressLocality">Seattle</span>
  </div>
  <p>Phone: <span itemprop="telephone">555-1234</span></p>
</div>

The validators will show the extracted structure:

LocalBusiness
├── name: "Joe's Coffee Shop"
├── address (PostalAddress)
│   ├── streetAddress: "123 Main St"
│   └── addressLocality: "Seattle"
└── telephone: "555-1234"

Browser Support

Section titled “Browser Support”

The itemscope attribute is supported by all modern browsers. While browsers don’t render Microdata differently, they make it available to JavaScript and browser extensions.

BrowserSupport
ChromeYes (since Chrome 4)
FirefoxYes (since Firefox 6)
SafariYes (since Safari 5)
EdgeYes (all versions)
OperaYes (since Opera 11.6)

Accessing Microdata with JavaScript

Section titled “Accessing Microdata with JavaScript”

You can access Microdata items using the DOM API:

<div id="person" itemscope itemtype="https://schema.org/Person">
  <span itemprop="name">Alice Johnson</span>
  <span itemprop="email">[email protected]</span>
</div>


<script>
  const element = document.getElementById('person');


  // Check if element has itemscope
  console.log(element.itemScope); // true


  // Get the itemtype
  console.log(element.itemType); // https://schema.org/Person


  // Get all items on the page
  const items = document.getItems();
  console.log(items); // HTMLCollection of all itemscope elements


  // Get items of a specific type
  const people = document.getItems('https://schema.org/Person');
</script>

Best Practices

Section titled “Best Practices”

Use Appropriate Schema Types

Section titled “Use Appropriate Schema Types”

Choose the most specific schema type that fits your content:

<!-- Too generic -->
<div itemscope itemtype="https://schema.org/CreativeWork">


<!-- Better - more specific -->
<article itemscope itemtype="https://schema.org/BlogPosting">
Section titled “Include All Recommended Properties”

Each schema type has required and recommended properties. Check schema.org for the full list:

<!-- Minimal Product (not ideal) -->
<div itemscope itemtype="https://schema.org/Product">
  <span itemprop="name">Widget</span>
</div>


<!-- Better - includes recommended properties -->
<div itemscope itemtype="https://schema.org/Product">
  <span itemprop="name">Widget</span>
  <img itemprop="image" src="widget.jpg" alt="Widget">
  <span itemprop="description">A useful widget for all purposes</span>
  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price">19.99</span>
    <meta itemprop="priceCurrency" content="USD">
  </div>
</div>

Use Meta Elements for Hidden Data

Section titled “Use Meta Elements for Hidden Data”

Some properties aren’t visible but are important for structured data:

<div itemscope itemtype="https://schema.org/Product">
  <h2 itemprop="name">Laptop Computer</h2>
  <p>Price: $899 <span style="color: red;">(Sale!)</span></p>


  <!-- Hidden structured data -->
  <meta itemprop="price" content="899.00">
  <meta itemprop="priceCurrency" content="USD">
  <link itemprop="availability" href="https://schema.org/InStock">
</div>

Don’t Mark Up Invisible Content

Section titled “Don’t Mark Up Invisible Content”

Only mark up content that’s visible to users (with the exception of <meta> tags for data formatting):

<!-- Wrong - hidden promotional content -->
<div itemscope itemtype="https://schema.org/Product" style="display: none;">
  <span itemprop="name">Buy our amazing product!</span>
</div>


<!-- Correct - visible content only -->
<div itemscope itemtype="https://schema.org/Product">
  <h2 itemprop="name">Professional Camera</h2>
  <p itemprop="description">High-quality DSLR camera...</p>
</div>
Section titled “Related Attributes”

itemtype

Specifies the vocabulary URL for the item (usually schema.org). Works together with itemscope to define what kind of thing you’re describing.

itemprop

Defines a property of an item within an itemscope. Each property adds a piece of information about the item.

itemid

Provides a unique identifier for the item, typically a URL. Used for items that have a canonical URL representation.

itemref

References properties that are outside the itemscope element but should be included in the item. Useful for non-hierarchical data.

Specifications

Section titled “Specifications”

WHATWG HTML Living Standard: HTML Microdata

Schema.org: Getting Started with Schema.org

Google Search Central: Understand how structured data works