HTMLMicrodata (itemscope, itemprop)

Microdata

Microdata is a way to embed structured data directly inside your existing HTML markup, using a small set of attributes: itemscope, itemtype, and itemprop. It lets search engines understand specific facts about your content — not just the text, but what that text means.

The three core attributes

Attribute

Purpose

itemscope

Marks an element as the start of a new structured "item"

itemtype

A URL (from schema.org) declaring what kind of thing the item is

itemprop

Labels a piece of content as a specific property of the enclosing item

Schema.org vocabulary basics

schema.org is a shared vocabulary of types (Product, Article, Person, Organization, Recipe, Event, and hundreds more) and properties for each type, maintained jointly by the major search engines. itemtype values are URLs into that vocabulary, like https://schema.org/Product.

Example: marking up a Product

HTML
<div itemscope itemtype="https://schema.org/Product">
  <h2 itemprop="name">Wireless Mechanical Keyboard</h2>
  <img itemprop="image" src="/keyboard.jpg" alt="Wireless mechanical keyboard" />
  <p itemprop="description">
    A compact 75% mechanical keyboard with hot-swappable switches.
  </p>
  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="priceCurrency" content="USD">$</span>
    <span itemprop="price" content="89.00">89.00</span>
    <link itemprop="availability" href="https://schema.org/InStock" />
  </div>
</div>
  • The outer div declares this whole block is a Product, via itemscope + itemtype.

  • Each itemprop labels an existing element as a specific field (name, image, description).

  • Nested itemscope blocks (like offers) represent an object property that is itself a structured type (Offer).

  • When the visible text isn't the actual machine value (like a formatted price), the content attribute supplies the raw value instead.

Example: marking up an Article

HTML
<article itemscope itemtype="https://schema.org/Article">
  <h1 itemprop="headline">Understanding HTML Microdata</h1>
  <p>
    By <span itemprop="author">Jane Doe</span> —
    <time itemprop="datePublished" datetime="2026-01-15">Jan 15, 2026</time>
  </p>
  <div itemprop="articleBody">
    <p>Microdata lets you describe structured facts inline...</p>
  </div>
</article>
Tip
Microdata's biggest advantage is that it annotates markup you likely already have — no separate data block to keep in sync. Its downside is exactly that: content and data are interleaved, which gets messy for deeply nested or highly structured data.
Note
JSON-LD has become the format search engines recommend for new projects, precisely because it keeps structured data separate from display markup. Microdata remains valid and supported, and is still common in older or content-management-driven sites.