Skip to main content

HTML Microdata (Live Playground)

In this tutorial, we will learn how to use HTML microdata to provide structured data within your HTML documents, making it easier for search engines and other applications to understand the content on your website.

What is Microdata?​

Microdata is an HTML specification that allows you to add semantic meaning to your markup, making it easier for search engines and other applications to understand and process the content on your web pages. By using microdata, you can provide additional information about the content, such as its type, properties, and relationships with other content.

How to Use Microdata​

To use microdata in your HTML documents, you need to add specific attributes to your HTML tags. These attributes are:

  • itemscope: Indicates that an element and its descendants contain microdata.
  • itemtype: Specifies the type of the item, usually a URL that represents a vocabulary (e.g., schema.org).
  • itemprop: Defines a property for an item.

Let's take a look at an example:

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>HTML Microdata Example</title>
  </head>
  <body>
    <article itemscope itemtype="http://schema.org/Book">
      <h2 itemprop="name">The Catcher in the Rye</h2>
      <p>Author: <span itemprop="author">J.D. Salinger</span></p>
      <p>Published: <time itemprop="datePublished" datetime="1951-07-16">July 16, 1951</time></p>
      <p>Number of Pages: <span itemprop="numberOfPages">224</span></p>
      <p itemprop="description">
        The Catcher in the Rye is a novel by J.D. Salinger, first published in 1951. It is a story about teenage angst
        and alienation, narrated by the protagonist, Holden Caulfield.
      </p>
    </article>
  </body>
</html>

In this example, we used microdata to provide structured data about a book. We added the itemscope and itemtype attributes to the <article> element to indicate that it contains microdata of type "Book". We also used the itemprop attribute to define properties for the book, such as its name, author, publication date, number of pages, and description.

Live Playground, Try it Yourself

Benefits of Microdata​

Using microdata in your HTML documents provides several benefits:

  • Improved SEO: Search engines can better understand the content on your website, which can lead to higher search rankings.
  • Richer search results: Search engines may display your content with rich snippets, making your search results more informative and attractive to users.
  • Easier data extraction: Other applications can easily extract structured data from your web pages for various purposes, such as data analysis or content syndication.

Conclusion​

Now you know how to use HTML microdata to provide structured data within your HTML documents, making it easier for search engines and other applications to understand the content on your website. This can help improve your website's SEO and provide a better user experience for those who find your content through search engines or other applications.