What is Microdata in HTML5?

Microdata in HTML5 is a method to embed structured, machine-readable data within web pages using HTML attributes like itemscope, itemtype, and itemprop, enabling search engines to better understand and display content; 1) itemscope defines a section as a specific item, 2) itemtype specifies the item’s category via a schema.org URL, 3) itemprop labels individual properties within that item, 4) optional itemid provides a unique identifier, and 5) itemref allows referencing properties outside the scope; for example, marking up a movie with title, director, genre, and duration helps search engines show rich snippets such as ratings, prices, or event dates; though still valid, microdata has been largely replaced by JSON-LD due to easier maintenance and reduced errors, but it remains a functional bridge between human- and machine-readable content.

Microdata in HTML5 is a way to add structured data to web pages so that search engines and other applications can better understand the content. It provides a simple, HTML-based method to embed machine-readable information directly into the existing content of a webpage, without changing how it looks to users.

Think of it like adding invisible labels to elements on a page—labels that tell computers, “This is a person,” “This is a product,” “This is an event,” and so on.

How Microdata Works

Microdata uses a set of attributes within HTML tags to define items and their properties. These attributes include:

• itemscope – Indicates that a section of the page is about a specific item.
• itemtype – Specifies the type of the item (usually a URL pointing to a vocabulary, like schema.org).
• itemprop – Defines a property of the item.
• itemid – (Optional) Gives a unique identifier for the item.
• itemref – (Optional) Allows referencing properties that are outside the itemscope.

For example, if you're marking up information about a movie:

<div itemscope itemtype="https://schema.org/Movie">
  <h1 itemprop="name">Inception</h1>
  <span itemprop="director">Directed by Christopher Nolan</span>
  <span itemprop="genre">Sci-Fi</span>
  <span itemprop="duration">PT148M</span>
</div>

Here, search engines can recognize that “Inception” is a movie, who directed it, its genre, and runtime—information that could be used to enhance search results with rich snippets.

Why Use Microdata?

Search engines like Google, Bing, and Yahoo use structured data to better interpret page content and improve search results. With microdata, you can help these engines display richer results, such as:

• Star ratings in reviews
• Event dates and locations
• Product prices and availability
• Recipe cooking times and ingredients

This can lead to better visibility and higher click-through rates from search engine results pages (SERPs).

Schema.org: The Common Vocabulary

Most microdata uses schema.org as the vocabulary. It’s a collaborative project supported by major search engines and provides standardized definitions for thousands of item types (like Person, Organization, Product, Event, etc.) and their properties.

For instance:

• itemtype="https://schema.org/Person" defines a person.
• itemprop="birthDate" specifies their date of birth.

A Few Limitations

While microdata is straightforward, it has been largely superseded by other formats like JSON-LD (which Google now recommends). JSON-LD keeps structured data separate from HTML, making it easier to manage and less error-prone. As a result, microdata is less commonly used in new projects today, though it's still valid and supported.

In short, microdata in HTML5 lets you annotate your content with meaningful labels so machines can understand it better. It’s not visible to users but helps search engines deliver more relevant and enriched results.

Basically, it’s a bridge between human-readable and machine-readable web content.

The above is the detailed content of What is Microdata in HTML5?. For more information, please follow other related articles on the PHP Chinese website!