HTML5 - Microdata

HTML5 - Microdata and Structured Data

HTML Microdata is a specification for embedding machine-readable data within existing HTML content. It helps search engines and other tools understand the context and meaning of information on your web pages.

Microdata works by introducing attributes to your HTML tags to define structured ‘items’ and their ‘properties’. An item represents an entity (like a person, product, or event), and properties are specific details about that entity.

Microdata Attributes

Microdata uses five key global attributes:

Attribute	Description
itemscope	A boolean attribute that declares a new item. It creates the scope for the properties defined using itemprop.
itemtype	Specifies the vocabulary (schema) and type of the item. Its value is typically a URL pointing to the item’s definition (e.g., from Schema.org).
itemprop	Indicates that its containing tag holds the value for a specified property of the item.
itemid	Provides a unique, global identifier for the item, typically a URL.
itemref	Allows associating elements that are not descendants of the itemscope element with the item, using their IDs.

Basic Example

Here’s how you might mark up information about a person using Microdata with the Schema.org vocabulary:

<div itemscope itemtype="https://schema.org/Person">
  <p>My name is <span itemprop="name">Zara</span>.</p>
  <p>My website is <a href="https://example.com" itemprop="url">example.com</a>.</p>
  <p>I work at <span itemprop="affiliation" itemscope itemtype="https://schema.org/Organization">
    <span itemprop="name">Example Corp</span>
   </span>.</p>
</div>

In this example:

• The outer div defines an item of type Person using itemscope and itemtype.
• itemprop="name" identifies ‘Zara’ as the person’s name.
• itemprop="url" identifies the link as the person’s URL.
• An inner itemscope defines an affiliated Organization with its own name property.

Property Values

Property values (itemprop) are typically strings extracted from the element’s content. However, specific HTML elements change how the value is interpreted:

• <meta>: The value is taken from the content attribute.
• <a>, <area>, <link>: The value is taken from the href attribute (representing a URL).
• <img>, <audio>, <video>, <embed>, <iframe>: The value is taken from the src attribute (representing a URL).
• <object>: The value is taken from the data attribute.
• <time>: The value is taken from the datetime attribute.
• <data>: The value is taken from the value attribute.

Example with Different Value Types

<div itemscope itemtype="https://schema.org/Event">
  <h1 itemprop="name">Tech Conference 2024</h1>
  <p>Date:
    <time itemprop="startDate" datetime="2024-10-26T09:00">October 26th, 2024, 9:00 AM</time>
  </p>
  <p>Location:
    <span itemprop="location" itemscope itemtype="https://schema.org/Place">
      <span itemprop="name">Conference Center</span>
    </span>
  </p>
  <a itemprop="url" href="https://example.com/conference">Event Website</a>
  <img itemprop="image" src="/images/conference-logo.png" alt="Conference Logo"/>
  <meta itemprop="eventStatus" content="https://schema.org/EventScheduled" />
</div>

Modern Approach: JSON-LD

While Microdata is part of the HTML standard, JSON-LD (JavaScript Object Notation for Linked Data) is now the recommended format by Google and other major search engines for embedding structured data.

JSON-LD allows you to embed structured data within a <script type="application/ld+json"> tag, often placed in the <head> or <body> of your HTML. This separates the structured data markup from your visible HTML content, making it cleaner and easier to manage.

JSON-LD Example (Equivalent to the Person example above)

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "Zara",
  "url": "https://example.com",
  "affiliation": {
    "@type": "Organization",
    "name": "Example Corp"
  }
}
</script>

<!-- Visible HTML content -->
<div>
  <p>My name is Zara.</p>
  <p>My website is <a href="https://example.com">example.com</a>.</p>
  <p>I work at Example Corp.</p>
</div>

Vocabularies: Schema.org

Regardless of whether you use Microdata or JSON-LD, you need a vocabulary to define the types and properties. Schema.org (https://schema.org) is the most widely adopted vocabulary, supported by major search engines.

It provides a vast collection of types (like Person, Product, Recipe, Event, LocalBusiness) and their corresponding properties. Using Schema.org helps ensure your structured data is understood correctly.

Testing Structured Data

You can test your structured data implementation using tools like the Schema Markup Validator (https://validator.schema.org/) and Google’s Rich Results Test (https://search.google.com/test/rich-results).

While Microdata remains valid HTML, adopting JSON-LD with Schema.org is generally the preferred best practice for modern web development and SEO.

For further details on Microdata specifically, refer to the W3C HTML Microdata specification (https://www.w3.org/TR/microdata/) or MDN Web Docs (https://developer.mozilla.org/en-US/docs/Web/HTML/Microdata).