HTML - HTML Microdata & Structured Data (Schema.org)

HTML Microdata and Structured Data are techniques used to add extra meaning to the content of a web page so that search engines, browsers, and other applications can better understand what the content represents. Normally, HTML tells the browser how to display content, but it does not clearly explain the meaning of that content. Structured data solves this problem by describing the purpose of data elements.

For example, if a webpage contains the text "Apple", a browser only sees it as text. A search engine may not know whether it refers to the fruit or the technology company. By using structured data, developers can specify exactly what "Apple" means.

Structured data is especially useful for search engine optimization (SEO) because search engines such as Google can use it to generate rich search results like star ratings, prices, recipes, event details, FAQs, and breadcrumbs.

What is Schema.org

Schema.org is a collaborative project created by major search engines including Google, Microsoft, Yahoo, and Yandex. It provides a standardized vocabulary for structured data markup.

Developers can use predefined schema types such as:

  • Person

  • Organization

  • Product

  • Event

  • Recipe

  • Article

  • Review

  • FAQ

  • LocalBusiness

  • Course

Each schema type contains properties that describe specific information.

For example:

  • Product can have name, price, description, brand, and review.

  • Event can have startDate, location, organizer, and ticket details.

What is HTML Microdata

Microdata is a method of embedding machine-readable metadata directly inside HTML elements using attributes.

The main microdata attributes are:

  • itemscope

  • itemtype

  • itemprop

  • itemid

  • itemref

These attributes help define structured content.

Important Microdata Attributes

1. itemscope

The itemscope attribute defines the beginning of a structured data item.

Example:

<div itemscope>
    <p>Book Information</p>
</div>

This tells the browser that the div contains a structured item.

2. itemtype

The itemtype attribute specifies the schema type.

Example:

<div itemscope itemtype="https://schema.org/Book">
    <p>Book Information</p>
</div>

This identifies the content as a Book.

3. itemprop

The itemprop attribute defines a property of the structured item.

Example:

<div itemscope itemtype="https://schema.org/Book">
    <span itemprop="name">Learning HTML</span>
    <span itemprop="author">John Smith</span>
</div>

Here:

  • name = Learning HTML

  • author = John Smith

4. itemid

The itemid attribute gives a unique identifier to an item.

Example:

<div itemscope itemtype="https://schema.org/Product" itemid="product123">
</div>

5. itemref

The itemref attribute references properties located elsewhere in the document.

Example:

<div itemscope itemtype="https://schema.org/Person" itemref="extraData">
</div>

<div id="extraData">
    <span itemprop="jobTitle">Developer</span>
</div>

Complete Example: Product Structured Data

<div itemscope itemtype="https://schema.org/Product">
    <h2 itemprop="name">Laptop</h2>
    
    <img src="laptop.jpg" itemprop="image">
    
    <p itemprop="description">
        High performance laptop for professionals
    </p>
    
    <span itemprop="brand">Dell</span>
    
    <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
        Price:
        <span itemprop="price">75000</span>
        <meta itemprop="priceCurrency" content="INR">
    </div>
</div>

This example describes:

  • product name

  • image

  • description

  • brand

  • price

  • currency

Search engines can read this information and display enhanced search results.

Benefits of Structured Data

Improved SEO

Search engines understand content more accurately, increasing chances of ranking better.

Rich Snippets

Search results may display:

  • ratings

  • prices

  • availability

  • FAQs

  • breadcrumbs

Example of rich result:

  • Product with star rating

  • Recipe with cooking time

  • Event with date and venue

Better Content Classification

Search engines can classify content correctly.

Example:

  • article

  • recipe

  • product

  • person

Voice Search Optimization

Voice assistants like Google Assistant rely heavily on structured data.

Example:
A user asks:
"Show me nearby restaurants."

Structured data helps search engines provide accurate answers.

Social Sharing Enhancement

Platforms can understand webpage details more effectively.

Common Schema Types

Article

<div itemscope itemtype="https://schema.org/Article">
    <h1 itemprop="headline">HTML Tutorial</h1>
    <span itemprop="author">Teena</span>
</div>

Event

<div itemscope itemtype="https://schema.org/Event">
    <span itemprop="name">Tech Conference</span>
    <span itemprop="startDate">2026-06-15</span>
</div>

Person

<div itemscope itemtype="https://schema.org/Person">
    <span itemprop="name">Rahul</span>
    <span itemprop="jobTitle">Designer</span>
</div>

FAQ

<div itemscope itemtype="https://schema.org/FAQPage">
</div>

Useful for FAQ rich snippets.

Nested Structured Data

Microdata supports nested objects.

Example: Product inside Offer.

<div itemscope itemtype="https://schema.org/Product">
    
    <span itemprop="name">Phone</span>
    
    <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
        <span itemprop="price">25000</span>
    </div>
    
</div>

This creates hierarchical relationships.

Microdata vs JSON-LD

Structured data can be written in multiple formats:

  1. Microdata

  2. RDFa

  3. JSON-LD

Although Microdata is embedded directly into HTML, Google recommends JSON-LD because it separates data from presentation.

Example JSON-LD:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Laptop",
  "brand": "Dell",
  "offers": {
    "@type": "Offer",
    "price": "75000",
    "priceCurrency": "INR"
  }
}
</script>

Advantages of JSON-LD:

  • cleaner code

  • easier maintenance

  • better readability

Best Practices

Use the correct schema type.

Bad:
Using Product schema for a blog article.

Good:
Using Article schema for articles.

Validate markup using Google's Rich Results Test.

Include accurate and updated data.

Do not add fake ratings or prices.

Use nested schema properly.

Prefer JSON-LD for large projects.

Real-World Applications

E-commerce websites use Product schema.

News websites use Article schema.

Food blogs use Recipe schema.

Educational websites use Course schema.

Event websites use Event schema.

Business websites use LocalBusiness schema.

Limitations

Microdata increases HTML complexity.

Maintenance becomes harder in large pages.

Incorrect markup may be ignored by search engines.

Not all schema types guarantee rich snippets.

Conclusion

HTML Microdata and Structured Data help developers provide semantic meaning to webpage content. By using Schema.org vocabulary and microdata attributes, websites become more understandable to search engines, improving SEO, discoverability, and rich search result eligibility.

Although JSON-LD is currently more popular, understanding Microdata is still important because it demonstrates how structured metadata can be embedded directly into HTML. This knowledge is valuable for building SEO-friendly and machine-readable web applications.