HTML - Microdata and Structured Data in HTML

Microdata and Structured Data are techniques used in HTML to provide additional meaning and context to web page content. They help search engines, browsers, and other applications better understand the information displayed on a website. Instead of only reading text visually, machines can interpret the data semantically.

Structured data plays an important role in Search Engine Optimization (SEO) because it allows search engines to display rich results such as ratings, reviews, product prices, recipes, event dates, FAQs, and breadcrumbs directly in search results.

What is Structured Data?

Structured data is a standardized format used to organize and label information on a webpage. It helps search engines identify the purpose and type of content.

For example:

  • A product page contains product name, price, availability, and reviews.

  • A recipe page contains ingredients, cooking time, and nutrition information.

  • An event page contains date, location, and ticket details.

Without structured data, search engines may not fully understand the relationships between these pieces of information.

What is Microdata?

Microdata is a specification used within HTML to embed structured metadata directly into webpage content using special attributes.

Microdata uses attributes such as:

  • itemscope

  • itemtype

  • itemprop

These attributes help define structured information inside normal HTML elements.

Importance of Structured Data

Better Search Engine Visibility

Structured data helps search engines generate rich snippets in search results.

Example:

Instead of showing only:

Laptop Store
Best laptops available online

Search engines may display:

Laptop Store
Rating: 4.8 ★
Price: ₹55,000
In Stock

Improved SEO

Structured data does not directly increase rankings, but it improves visibility and click-through rates.

Better Content Understanding

Search engines understand relationships between data elements more accurately.

Voice Search Optimization

Voice assistants such as Google Assistant and Siri use structured data to provide accurate answers.

Schema.org

Most structured data implementations use vocabulary defined by Schema.org.

Schema.org provides predefined types such as:

  • Person

  • Product

  • Event

  • Recipe

  • Organization

  • Article

  • Movie

  • Book

These types help standardize how information is described.

Basic Structure of Microdata

Example: Person Information

<div itemscope itemtype="https://schema.org/Person">
    <h2 itemprop="name">Rahul Sharma</h2>
    <p itemprop="jobTitle">Web Developer</p>
    <p itemprop="email">[email protected]</p>
</div>

Explanation

itemscope

Defines the beginning of a structured data item.

<div itemscope>

This tells the browser that the content inside represents a specific item.

itemtype

Specifies the type of item using a Schema.org URL.

itemtype="https://schema.org/Person"

This indicates that the item represents a person.

itemprop

Defines properties of the item.

itemprop="name"
itemprop="jobTitle"

These properties describe characteristics of the person.

Product Structured Data Example

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

    <h1 itemprop="name">Smartphone X</h1>

    <img src="phone.jpg" itemprop="image">

    <p itemprop="description">
        Latest 5G smartphone with advanced camera.
    </p>

    <span itemprop="brand">TechBrand</span>

    <div itemprop="offers" itemscope
         itemtype="https://schema.org/Offer">

        Price:
        <span itemprop="price">49999</span>

        <meta itemprop="priceCurrency" content="INR">

        <link itemprop="availability"
              href="https://schema.org/InStock">

    </div>

</div>

Features of the Above Example

Product Name

itemprop="name"

Defines the product title.

Description

itemprop="description"

Provides product details.

Offers

Nested structured data can be used for pricing information.

Availability

Shows whether the product is in stock.

Nested Microdata

Microdata supports nesting of items.

Example:

  • Product contains Offer

  • Article contains Author

  • Recipe contains Nutrition Information

Nested items improve content relationships.

HTML Attributes Used in Microdata

Attribute Purpose
itemscope Creates a new item
itemtype Defines item type
itemprop Defines property
itemid Provides unique identifier
itemref References external properties

Example Using itemid

<div itemscope
     itemtype="https://schema.org/Book"
     itemid="book123">

This uniquely identifies the item.

Types of Structured Data

Product Data

Used in e-commerce websites.

Contains:

  • Price

  • Reviews

  • Brand

  • Availability

Article Data

Used for blogs and news websites.

Contains:

  • Author

  • Publish date

  • Headlines

Event Data

Used for conferences and concerts.

Contains:

  • Date

  • Venue

  • Ticket details

FAQ Data

Used for question-answer sections.

Recipe Data

Used for cooking websites.

Contains:

  • Ingredients

  • Cooking time

  • Calories

JSON-LD vs Microdata

Modern websites commonly use JSON-LD instead of Microdata.

Microdata

Embedded directly inside HTML elements.

Example:

<p itemprop="name">Laptop</p>

JSON-LD

Written separately using JavaScript Object Notation.

Example:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Laptop"
}
</script>

Advantages of JSON-LD

  • Cleaner code

  • Easier maintenance

  • Recommended by Google

  • Separate from HTML structure

Advantages of Microdata

  • Direct integration with HTML

  • Easier for small projects

  • Immediate association with visible content

Rich Snippets

Structured data enables rich snippets in search engines.

Examples include:

  • Star ratings

  • Product prices

  • Recipe timings

  • Event dates

  • FAQ dropdowns

Rich snippets increase user engagement and improve visibility.

SEO Benefits

Higher Click-Through Rate

Users are more likely to click enhanced search results.

Better Search Categorization

Search engines classify pages more accurately.

Improved Mobile Search Results

Rich results appear better on mobile devices.

Validation Tools

Developers can test structured data using validation tools.

Popular tools include:

  • Google Rich Results Test

  • Schema Markup Validator

These tools check errors and warnings in markup.

Best Practices

Use Valid Schema Types

Always use official Schema.org types.

Avoid Fake Data

Structured data must match visible page content.

Keep Information Updated

Prices, ratings, and availability should remain accurate.

Use Relevant Properties

Only add properties relevant to the content.

Validate Markup

Always test structured data before publishing.

Common Mistakes

Incorrect Nesting

Improperly nested items can confuse search engines.

Missing Required Properties

Some schema types require mandatory fields.

Using Irrelevant Schema

Incorrect schema usage reduces effectiveness.

Hidden Structured Data

Providing invisible or misleading data may violate search engine guidelines.

Applications of Structured Data

E-commerce Websites

Product details and ratings.

Blogging Platforms

Article metadata and author information.

Educational Websites

Course information and tutorials.

Event Management Systems

Event schedules and booking details.

Recipe Websites

Cooking instructions and ingredients.

Future of Structured Data

Structured data is becoming increasingly important due to:

  • AI-powered search engines

  • Voice assistants

  • Semantic web technologies

  • Smart devices

  • Advanced search experiences

Search engines are continuously improving their ability to understand web content semantically, making structured data a critical part of modern web development.

Conclusion

Microdata and Structured Data enhance HTML by giving meaning to webpage content. They help search engines interpret information accurately and display rich search results. Microdata uses HTML attributes like itemscope, itemtype, and itemprop to define structured information directly within web pages.

Although JSON-LD is now more commonly used, understanding Microdata remains important because it demonstrates the core principles of semantic markup and machine-readable web content. Structured data has become essential for SEO, accessibility, and modern web applications.