Topic 51 of 57 10. Advanced HTML Topics Interactive Tutorial
HTML Microdata: Attributes, Structured Data, and Examples
On This Page0 sectionsQuick jump to subtopic
Topic Overview & Definition
Key Question
What is HTML Microdata and how does Schema.org markup unlock Google Rich Snippets?
Direct Answer & Overview
HTML Microdata is a specification used to embed structured metadata directly within existing HTML elements. Supported by major search engines through Schema.org, Microdata uses attributes like 'itemscope', 'itemtype', and 'itemprop' to explicitly define products, reviews, recipes, FAQs, and organizations, generating rich snippets and star ratings on Google search results.
Comprehensive Step-by-Step Concepts
1) Why Search Engines Need Structured Data: While humans easily understand that '$29.99' is a product price and '4.8 Stars' is a review score, search engine crawlers require explicit semantic annotation to index this data accurately. 2) The Core Microdata Attributes:
- itemscope: Declares that the enclosed HTML element represents a distinct structured item.
- itemtype: Specifies the Schema.org vocabulary URL defining the item (e.g. itemtype="https://schema.org/Product").
- itemprop: Annotates a specific property of that item (e.g. itemprop="name", itemprop="price"). 3) Common Schema Types:
- Organization & LocalBusiness: Address, phone number, logo, opening hours.
- Product & Offer: Price, currency, availability, SKU, brand.
- Article: Headline, author, datePublished, publisher.
- Review & Rating: Reviewer name, reviewRating, ratingValue (displays star ratings in Google SERP). 4) Microdata vs JSON-LD: While Microdata annotates inline HTML markup directly, JSON-LD (JavaScript Object Notation for Linked Data) embeds structured data inside a