How to use microdata for semantic content in HTML5

Microdata enhances SEO by embedding structured data into HTML5 through attributes like itemscope, itemtype, and itemprop, enabling search engines to understand content context; for example, marking up a person or book with schema.org types such as Person or Book allows rich snippets in search results; complex data like addresses can be nested using itemscope within itemprop; best practices include using visible, accurate, and complete data from schema.org, testing with tools like Google’s Rich Results Test, and applying microdata only to meaningful items, making it a simple yet effective way to add machine-readable context without altering page appearance.

Microdata is a way to embed structured, semantic data directly into your HTML5 markup. It helps search engines, browsers, and other tools understand the meaning of content on a web page, improving SEO and enabling rich snippets in search results. Here's how to use microdata effectively for semantic content.

Understanding Microdata Basics

Microdata works by adding specific attributes to HTML elements to describe real-world items and their properties. The key attributes are:

• itemscope — Defines that an element contains a set of name-value pairs describing a specific item.
• itemtype — Specifies the type of item (as a URL, usually from schema.org).
• itemprop — Identifies a property of the item.
• itemid — (Optional) A unique identifier for the item.
• itemref — (Optional) References other elements not inside the itemscope that still belong to the item.

For example, marking up a person:

<div itemscope itemtype="//m.sbmmt.com/link/373321f3ae1bebd3f6818359b0f8f6e6/Person">
  <h1>Name: <span itemprop="name">Jane Doe</span></h1>
  <p>Email: <a href="mailto:jane@example.com" itemprop="email">jane@example.com</a></p>
  <p>Job Title: <span itemprop="jobTitle">Web Developer</span></p>
  <p>Company: <span itemprop="affiliation">TechCorp</span></p>
</div>

This tells search engines that this block describes a person named Jane Doe with specific attributes.

Choosing the Right Schema

The most widely used vocabulary for microdata is schema.org, which offers types for almost any kind of content:

• Person, Organization, Product, Event, Recipe, Article, etc.
• Each type has defined properties (like name, url, image, description).

Always check schema.org to find the correct itemtype and available itemprop values. Using standardized terms ensures compatibility with search engines like Google, Bing, and Yahoo.

For example, marking up a book:

<div itemscope itemtype="//m.sbmmt.com/link/373321f3ae1bebd3f6818359b0f8f6e6/Book">
  <h2 itemprop="name">The Great Gatsby</h2>
  <p>Author: <span itemprop="author">F. Scott Fitzgerald</span></p>
  <p>Published: <time itemprop="datePublished" datetime="1925">1925</time></p>
  <p>ISBN: <span itemprop="isbn">978-0-7432-7356-5</span></p>
  <img src="/static/imghw/default1.png"  data-src="gatsby.jpg"  class="lazy" alt="Cover of The Great Gatsby" itemprop="image">
</div>

Nesting Items for Complex Data

Some properties require another item as their value. You can nest itemscope within an itemprop to represent this.

For example, a person’s address is not just text—it’s a structured PostalAddress:

<div itemscope itemtype="//m.sbmmt.com/link/373321f3ae1bebd3f6818359b0f8f6e6/Person">
  <span itemprop="name">John Smith</span>
  lives at:
  <div itemprop="address" itemscope itemtype="//m.sbmmt.com/link/373321f3ae1bebd3f6818359b0f8f6e6/PostalAddress">
    <span itemprop="streetAddress">123 Main St</span>,
    <span itemprop="addressLocality">New York</span>,
    <span itemprop="addressRegion">NY</span>
  </div>
</div>

Here, the address property points to a nested item of type PostalAddress.

Best Practices and Tips

• Use schema.org types and properties — they’re widely supported.
• Mark up visible content only — search engines penalize hidden data.
• Be accurate and complete — include key properties like name, url, image, and description when possible.
• Test your markup using tools like Google’s Rich Results Test to verify it’s valid and eligible for rich snippets.
• Don’t overuse microdata — apply it to meaningful, standalone items, not every paragraph.

Microdata doesn’t change how your page looks, but it adds powerful context behind the scenes. While JSON-LD is now often preferred for SEO, microdata is still valid and useful, especially when you want to keep structured data tightly coupled with HTML elements.

Basically, just identify the item, pick the right schema, and tag the relevant elements. It’s simple but effective for making your content more meaningful to machines.

The above is the detailed content of How to use microdata for semantic content in HTML5. For more information, please follow other related articles on the PHP Chinese website!