HTML itemscope Global Attribute

The itemscope attribute is a global HTML attribute used to define the scope of a microdata item. Microdata is a way to embed structured data within HTML documents, allowing search engines, web crawlers, and other tools to better understand the content of your page.

When you add itemscope to an HTML element, it indicates that the element represents a single item with properties, which can then be described using other microdata attributes like itemprop and itemtype.

How It Works

• Declaring an item: Adding itemscope to an element marks it as a container for a microdata item. It tells browsers and search engines that this element has properties that can be enumerated.

• Optional itemtype: Often, itemscope is combined with itemtype to specify the type of item (using a URL that defines a vocabulary, usually from Schema.org). This gives semantic meaning to the data.

• Child properties: Elements inside an itemscope element can have the itemprop attribute, defining properties of that item. These child elements are considered part of the scope of the item.

Syntax

<!-- Basic itemscope usage -->
<div itemscope>
  <span itemprop="name">Sample Item</span>
  <span itemprop="description">This is a description of the item.</span>
</div>

<!-- Using itemscope with itemtype -->
<div itemscope itemtype="https://schema.org/Product">
  <span itemprop="name">Chocolate Bar</span>
  <span itemprop="brand">Sweet Co.</span>
  <span itemprop="price">$2.50</span>
</div>

Key Points

1. Global attribute: itemscope can be used on almost any HTML element because it is global.

2. Boolean attribute: It does not require a value; just including it is enough. Example: <div itemscope>.

3. Creates a microdata scope: Only child elements within the itemscope container with itemprop attributes are considered part of the item.

4. Works with itemtype and itemid:

   • itemtype: Specifies the type of item.
   • itemid: Provides a unique identifier for the item.

5. Supports nested items: You can have itemscope elements inside other itemscope elements to represent hierarchical data.

Example of Nested Items

<div itemscope itemtype="https://schema.org/Person">
  <span itemprop="name">John Doe</span>
  <div itemscope itemprop="address" itemtype="https://schema.org/PostalAddress">
    <span itemprop="streetAddress">123 Main St</span>
    <span itemprop="addressLocality">Springfield</span>
    <span itemprop="postalCode">12345</span>
  </div>
</div>

• Here, the address property of the Person item is itself a nested microdata item.