HTML Microdata

HTML Microdata is a specification that allows you to embed machine-readable data in your web pages. This helps search engines and other applications better understand the content of your pages and provide richer search results.

Microdata Syntax

Microdata uses a set of global attributes to annotate HTML elements with machine-readable tags. The key attributes are:

• itemscope: Creates a new item.
• itemtype: Specifies the type of item.
• itemprop: Indicates that its value contributes to the item it is contained in.
• itemid: Provides a unique identifier for the item.
• itemref: Provides a list of additional elements with additional properties.

Basic Example

Let's start with a basic example of using Microdata to annotate a product review:

        
            <div itemscope itemtype="http://schema.org/Review">
    <span itemprop="name">Great Product</span> by
    <span itemprop="author">John Doe</span> -
    <span itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
        <span itemprop="ratingValue">5</span> stars
    </span>
</div>
        
    

In this example, the itemscope attribute creates a new item, the itemtype attribute specifies that this is a "Review", and various itemprop attributes specify properties of the review such as the item being reviewed, the author, and the review rating.

Advanced Example

Here is a more advanced example that includes nested items and additional properties:

        
            <div itemscope itemtype="http://schema.org/Product">
    <span itemprop="name">Awesome Widget</span>
    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
        Price: <span itemprop="price">$19.99</span>
        <link itemprop="availability" href="http://schema.org/InStock">In stock</link>
    </div>
    <div itemprop="review" itemscope itemtype="http://schema.org/Review">
        Review by <span itemprop="author" itemscope itemtype="http://schema.org/Person">
            <span itemprop="name">Jane Smith</span>
        </span>
        <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
            Rating: <span itemprop="ratingValue">4</span> out of 5
        </div>
    </div>
</div>
        
    

In this example, the product and the author of the review are both nested items, with their own itemscope and itemtype attributes. This allows for a more detailed and structured representation of the data.

Using Microdata with Schema.org

Schema.org provides a collection of schemas that webmasters can use to markup their pages in ways recognized by major search providers. Here is an example of using Schema.org vocabulary with Microdata:

        
            <div itemscope itemtype="http://schema.org/Person">
    <span itemprop="name">John Doe</span>
    <span itemprop="jobTitle">Software Engineer</span>
    <span itemprop="affiliation" itemscope itemtype="http://schema.org/Organization">
        <span itemprop="name">Tech Company</span>
    </span>
</div>
        
    

This example marks up a person with properties such as name, job title, and works for an organization. The itemtype attribute references the URL of the schema, and the itemprop attributes define the properties.

Summary

HTML Microdata provides a way to add structured data to your web pages, enhancing their semantic meaning and making them more understandable to search engines and other applications. By using Microdata, you can help improve the visibility and richness of your content in search results.