HTML Microdata is a semantic markup standard that allows website owners to embed machine-readable data within their HTML content. It provides a way to label information on web pages, making it easier for search engines and other applications to understand and process the content.
The primary purpose of HTML Microdata is to enhance the semantic structure of web pages. By implementing Microdata, you can:
HTML Microdata uses three main attributes:
itemscope: Defines the scope of an itemitemtype: Specifies the type of item being describeditemprop: Defines a property of the itemHere's a simple example of how to use HTML Microdata to mark up information about a person:
<div itemscope itemtype="https://schema.org/Person">
<span itemprop="name">John Doe</span>
<span itemprop="jobTitle">Web Developer</span>
<span itemprop="telephone">(123) 456-7890</span>
<a href="mailto:john@example.com" itemprop="email">john@example.com</a>
</div>
In this example, we've defined a person with properties such as name, job title, telephone, and email.
Microdata also supports nested items. Here's an example of a product with nested organization information:
<div itemscope itemtype="https://schema.org/Product">
<span itemprop="name">Smartphone X</span>
<span itemprop="description">A high-end smartphone with advanced features.</span>
<div itemprop="brand" itemscope itemtype="https://schema.org/Organization">
<span itemprop="name">TechCorp</span>
</div>
<span itemprop="price">$799.99</span>
</div>
HTML Microdata is part of a broader ecosystem of semantic web technologies. Some related concepts include:
By mastering HTML Microdata, you'll be able to create more semantically rich web pages that are better understood by search engines and other automated systems, potentially improving your website's visibility and functionality.