← Back to HTML Course | Chapter 9: Reference & Advanced | Lesson 1 of 9

HTML Microdata & Schema

Imagine listing a product on your website and writing: 'Our PDF Converter tool costs zero dollars.' To a human reader, that is simple. But to a search engine bot, it is just a random string of words. The bot does not know if 'PDF Converter' is a physical machine, a book, or software, or if zero is the price. HTML Microdata is like adding hidden, labeled stickers directly to your text. You tag specific words to tell search engines: 'This is a Software Application, this is its name, and this is its price.' By adding these structured labels, you help search engines display your pages with rich details—like star ratings, prices, and tool descriptions—directly in search results.

In this page:

  1. What is Microdata?
  2. Defining Scope with itemscope
  3. Declaring Types with itemtype
  4. Marking Properties with itemprop
  5. Nesting Item Properties
Syntax
markup 
<div itemscope itemtype="https://schema.org/Type">
  <span itemprop="property">Value</span>
</div>

What is Microdata?

Microdata is a specification used to nest machine-readable structured data directly inside your HTML. It allows search engines to understand the exact context of your content beyond basic text descriptions.

Note: Use Schema.org vocabulary as the global standard for your microdata type definitions.
Warning: Failing to write microdata cleanly can prevent search engines from displaying rich snippets for your site.

Example: What is Microdata?

markup 
<div itemscope itemtype="https://schema.org/Product">
  <span itemprop="name">Coffee Maker</span>
</div>

Defining Scope with itemscope

The itemscope attribute defines the boundaries of a specific structured item. It tells search engines that all the nested itemprop properties inside this container belong to the same item.

Note: Place the itemscope attribute on the outermost parent container of your content block.
Warning: If you forget to declare itemscope, any nested itemprop attributes will be ignored by search bots.

Example: Defining Scope with itemscope

markup 
<div itemscope>
  <span itemprop="name">Coffee Maker</span>
</div>

Declaring Types with itemtype

The itemtype attribute specifies the exact vocabulary category of your item (like a Book, Product, or SoftwareApplication) using a URL that links directly to its official definition on Schema.org.

Note: Always pair your itemtype attribute with itemscope on the same parent element.
Warning: Using custom, unregistered itemtype URLs will prevent search engines from parsing your data.

Example: Declaring Types with itemtype

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

Marking Properties with itemprop

The itemprop attribute labels specific properties (like name, description, price, or operatingSystem) inside your item scope. Search engines map these values directly to their indexing databases.

Note: Check the exact property names allowed for your itemtype on Schema.org to prevent validation errors.
Warning: Do not mix itemprop attributes from different schema types within the same scope without nesting.

Example: Marking Properties with itemprop

markup 
<div itemscope itemtype="https://schema.org/SoftwareApplication">
  <span itemprop="name">My App</span>
  <span itemprop="operatingSystem">Android</span>
</div>

Nesting Item Properties

You can nest structured items inside other items. For example, a SoftwareApplication item can contain an Offer item (for pricing), which in turn contains price and currency properties, creating a rich hierarchical tree of details.

Note: Use nested properties to supply rich price details that display directly in search results.
Warning: Ensure your nested items contain their own itemscope attributes to declare their local boundaries.

Example: Nesting Item Properties

markup 
<div itemscope itemtype="https://schema.org/SoftwareApplication">
  <span itemprop="name">My App</span>
  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price">4.99</span>
    <span itemprop="priceCurrency">USD</span>
  </div>
</div>
Live Example
Related Topics

HTML Tag List · HTML Global Attributes · HTML Events · HTML URL Encode Reference

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Forgetting to declare the parent itemscope attribute, which invalidates all nested itemprop properties.
  2. Misspelling or capitalizing property names incorrectly compared to Schema.org standards.
  3. Writing unquoted schema URLs inside your itemtype attributes.
Chapter Summary
  • HTML Microdata adds machine-readable structured labels to your webpage content for search engine crawlers.
  • Declare item scopes using the itemscope attribute and specify their category definitions with itemtype.
  • Tag specific content items inside your scope using the itemprop attribute, nesting items to structure complex data.
Browser Support

HTML Microdata parsing is supported natively by all major search engine crawlers and browsers.

🔒

Chapter Quiz — Complete all 9 topics to unlock

0/9 topics done

Complete these topics first:

← Previous Lesson HTML PWA Basics Next Lesson → HTML Tag List

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.