HTML itemref Global Attribute

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The itemref attribute is part of the Microdata specification in HTML. Microdata is used to provide a way to annotate content with machine-readable metadata, allowing search engines and other tools to better understand the relationships between pieces of data on a webpage.

Purpose

The itemref attribute specifies a list of element IDs that contain additional properties related to a given item. These elements are not necessarily descendants of the element with the itemscope attribute, but they are still logically connected to it.

In simpler terms, itemref lets you point to elements elsewhere in the document that should be treated as part of the same "item" for semantic purposes.

How it Works

An element with an itemscope attribute defines a new item.
Normally, properties of that item are defined using itemprop attributes on elements inside the itemscope.
If some properties are outside the itemscope element, itemref can be used to reference them.
The value of itemref is a space-separated list of IDs of elements that contain additional properties.

Syntax

<div itemscope itemtype="https://schema.org/Person" itemref="extra1 extra2">
  <span itemprop="name">Alice</span>
</div>

<div id="extra1">
  <span itemprop="jobTitle">Engineer</span>
</div>

<div id="extra2">
  <span itemprop="email">alice@example.com</span>
</div>

In this example:

The <div> with itemscope defines a Person.
itemref="extra1 extra2" tells the browser or parser that the elements with IDs extra1 and extra2 also contain properties of this Person.
As a result, jobTitle and email are associated with the same Person item, even though they are outside the main itemscope element.

Key Points

itemref does not create a new itemscope; it only references properties.
The referenced elements must have unique IDs, as itemref uses these IDs to locate them.
Multiple IDs can be listed, separated by spaces.
Useful when structuring your HTML semantically while keeping your layout flexible (e.g., when properties need to be placed in different parts of the page).

When to Use

When you want to separate metadata from the main content visually.
When your page layout prevents nesting all properties within the itemscope.
When you want to maintain semantic clarity without duplicating content.

Syntax

<div itemscope itemtype="https://schema.org/Person" itemref="extra1 extra2"><span itemprop="name">Alice</span></div>

Values

itemref
The attribute accepts a string containing one or more unique identifiers.
- Single ID: A single id value (e.g., itemref="contact-info").
- Multiple IDs: Multiple id values separated by a single space (e.g., itemref="bio-1 social-links meta-data").
- Case Sensitivity: The IDs must match the id attributes of the target elements exactly (IDs in HTML are case-sensitive).

Example

HTML

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Itemref Example</title>

</head>

<body>



<!-- Main item scope -->

<div itemscope itemtype="https://schema.org/Person" itemref="extra-contact extra-address">

  <h2>Person Information</h2>

  <p>Name: <span itemprop="name">John Doe</span></p>

</div>



<!-- Properties outside the main itemscope -->

<div id="extra-contact">

  <p>Email: <span itemprop="email">john.doe@example.com</span></p>

  <p>Phone: <span itemprop="telephone">+1-555-1234</span></p>

</div>



<div id="extra-address">

  <p>Address: <span itemprop="address">123 Main St, Anytown</span></p>

</div>



</body>

</html>

Result

Editor

Browser Support

The following information will show you the current browser support for the HTML itemref global attribute. Hover over a browser icon to see the version that first introduced support for this HTML global attribute.