Complete HTML Course Module 13: Advanced: Web Components and Web App Features

Microdata and RDFa: Other Ways to Add Structured Data

  • Beginner
  • Lesson 13.3
  • 4 min read
  • 57 of 69 in the course

In short

Microdata and RDFa are two ways to add structured data with HTML attributes, like itemscope and itemprop. Learn how they work, how they compare with JSON-LD, and where you may meet them. What are microdata and RDFa?

Microdata and RDFa are two ways to add structured data with HTML attributes, like itemscope and itemprop. Learn how they work, how they compare with JSON-LD, and where you may meet them.

What are microdata and RDFa?

In the JSON-LD lesson, you described your page for search engines in a separate <script type="application/ld+json"> block. Microdata and RDFa do the same job in a different way: they add attributes directly to the HTML that people see. It is like putting price stickers on the products themselves, instead of keeping a separate price list at the till.

All three use the same vocabulary, Schema.org, so the types (Recipe, Person, Product) and properties (name, author, price) are the ones you already know.

How microdata works: itemscope, itemtype and itemprop

Microdata uses three main attributes:

  • itemscope says "this element describes one thing".
  • itemtype says what kind of thing, as a Schema.org URL, like https://schema.org/Recipe.
  • itemprop marks an element inside it as one property, like name or author.

For values people don't need to see, use <meta itemprop="..." content="..."> inside the item. For dates, use <time> with datetime. For links and images, the value comes from href or src.

<article itemscope itemtype="https://schema.org/Recipe">
  <h1 itemprop="name">Easy Banana Bread</h1>
  <img itemprop="image" src="images/banana-bread.jpg" alt="A loaf of banana bread on a wooden board" width="800" height="533">

  <p>By
    <span itemprop="author" itemscope itemtype="https://schema.org/Person">
      <span itemprop="name">Maria Lopez</span>
    </span>,
    published <time itemprop="datePublished" datetime="2026-09-12">12 September 2026</time>
  </p>

  <p itemprop="description">A soft, sweet loaf that uses up overripe bananas.</p>
  <p>Total time: <time itemprop="totalTime" datetime="PT1H10M">1 hour 10 minutes</time></p>
  <meta itemprop="recipeYield" content="8 slices">

  <h2>Ingredients</h2>
  <ul>
    <li itemprop="recipeIngredient">3 ripe bananas</li>
    <li itemprop="recipeIngredient">250 g flour</li>
    <li itemprop="recipeIngredient">100 g sugar</li>
  </ul>
</article>

Visitors see a normal recipe page. Search engines read a Recipe with a name, image, author, date, description, time and ingredients. Notice the author: the <span> has both itemprop="author" and its own itemscope, which creates a nested item, a Person inside the Recipe. PT1H10M is a standard way to write "1 hour 10 minutes".

Common mistake: Forgetting itemscope. Without it, itemprop attributes have no item to belong to and are ignored. Every itemtype needs an itemscope on the same element.

How RDFa works: vocab, typeof and property

RDFa (Resource Description Framework in attributes) is similar, with different attribute names. vocab sets the vocabulary, typeof sets the type, and property marks each value.

<div vocab="https://schema.org/" typeof="LocalBusiness">
  <h2 property="name">Green Leaf Cafe</h2>
  <p property="description">Fresh coffee and homemade cakes.</p>
  <p>Call us: <a property="telephone" href="tel:+441130000000">0113 000 0000</a></p>
  <div property="address" typeof="PostalAddress">
    <span property="streetAddress">12 Market Street</span>,
    <span property="addressLocality">Leeds</span>
  </div>
</div>

This describes a local business with a name, description, phone number and a nested address. On the page, it is just a normal contact section.

JSON-LD vs microdata vs RDFa

JSON-LDMicrodataRDFa
Where it livesA separate script blockAttributes on visible HTMLAttributes on visible HTML
Easy to add and change?Yes, all in one placeHarder, spread across the pageHarder, spread across the page
Risk of breaking when you redesignLowHighHigh
Recommended by GoogleYes, preferredSupportedSupported
Common inNew sites, most pluginsOlder themes and shopsSome CMSs, libraries, government sites

For new projects, choose JSON-LD. It keeps the data separate from your layout, so a designer can change the HTML without breaking it.

Tip: Whatever format you use, test it with Google's Rich Results Test or the Schema Markup Validator, just like you did with JSON-LD. Both read microdata and RDFa too.

When you might still meet microdata

You will not usually write microdata from scratch, but you will find it in real projects:

  • Older website themes, including some WordPress and online shop templates, which mark up products, reviews and breadcrumbs with itemprop.
  • Code you inherit at work, where changing to JSON-LD takes time.
  • Content management systems like Drupal, which have used RDFa for years.

If you take over a site like this, don't add JSON-LD for the same thing on top of the microdata. Two different descriptions of one product can confuse search engines. Either keep the microdata, or replace it fully with JSON-LD. You can read more on MDN: Microdata.

Practice exercise

Mark up a small event page with microdata. Use itemtype="https://schema.org/Event" with a name, a startDate on a <time> element, a description, and a nested location of type Place with its own name. Then test it with the Schema Markup Validator.

Hint: the location element needs itemprop="location", itemscope and itemtype="https://schema.org/Place" all together.

Key takeaways

  • Microdata and RDFa add Schema.org structured data as attributes on visible HTML.
  • Microdata uses itemscope, itemtype and itemprop; RDFa uses vocab, typeof and property.
  • Nest items by putting itemprop and itemscope on the same element.
  • JSON-LD is easier to maintain and is Google's preferred format for new sites.
  • Don't describe the same thing twice in two formats; keep one or replace it fully.