Microformats: The Complete Guide to Semantic HTML Markup

What Are Microformats?

Microformats are standards for embedding semantic meaning and structured data directly into HTML markup using standardized class names. Unlike external metadata formats that exist separately from content, microformats integrate seamlessly within existing HTML elements, allowing both humans and machines to understand the information presented on a webpage.

The philosophy behind microformats embraces a "build for humans, machines can understand" approach. Each microformat consists of a root class name (beginning with "h-") that identifies the type of data being marked up, along with property class names that describe specific attributes of that data. When a parser encounters this markup--whether from a search engine, social platform, or browser extension--it can extract structured information without requiring special APIs or external datasets.

The practical implications extend across multiple domains. Search engines like Google, Bing, and Yahoo use microformats to generate rich snippets in search results, displaying star ratings, event dates, author information, and other enhanced content directly in search listings. Implementing microformats as part of a comprehensive SEO strategy helps search engines understand your content structure and improve how your pages appear in search results.

The Evolution from Microformats to Microformats2

The original microformat specification evolved from early web standards efforts in the mid-2000s, with formats like hCard for contact information and hCalendar for events gaining widespread adoption. However, the original approach required publishers to learn multiple complex patterns and often relied on abbreviated property names that could conflict with existing CSS conventions. Microformats2 emerged as a comprehensive revision that simplified the parsing model while maintaining backward compatibility.

Microformats2 introduces a consistent prefix system that applies across all vocabulary types:

• "h-" prefix: Designates root class names that identify the type of entity
• "p-" prefix: Plain text properties for names, descriptions, titles
• "u-" prefix: URL properties for links, photos, logos
• "dt-" prefix: Date and time properties with machine-readable formats
• "e-" prefix: Embedded markup for content with HTML structure

This systematic approach reduced the learning curve while enabling parser libraries to handle any microformat consistently.

Core Microformat Vocabularies

Understanding the available microformat vocabularies enables publishers to mark up virtually any type of structured content found on the modern web. Each vocabulary addresses a specific domain of information while following consistent patterns that simplify implementation.

h-Card: People and Organizations

The h-card microformat provides a standardized structure for representing people, organizations, and locations. Originally derived from the vCard standard used in address book applications, h-card translates those conventions into HTML class attributes that can be embedded directly within webpage content.

Key properties include:

• p-name: The person's or organization's full name
• p-job-title: Professional title or role
• p-org: Organization name
• u-photo: Profile or logo image URL
• u-url: Website or profile URL
• u-email: Email address
• p-adr: Address with nested location properties
• p-street-address, p-locality, p-region, p-postal-code, p-country-name

h-Entry: Blog Posts and Content

Content publications benefit from h-entry markup, which structures articles, blog posts, notes, and other time-based content for machine interpretation. The vocabulary captures essential metadata including the entry name or title, author information, publication and update timestamps, summary or excerpt, and full content with embedded markup.

Key properties include:

• p-name: Entry title or headline
• p-author: Author information (often nested h-card)
• dt-published: Original publication date
• dt-updated: Last modification date
• p-summary: Brief description or excerpt
• e-content: Full content with HTML markup
• p-category: Topic tags and categories

h-Event: Occasions and Schedules

Event listings benefit from h-event markup, which structures temporal information including event names, descriptions, start and end times, locations, and organizer details. Conference websites, meetup pages, and event calendars can all leverage h-event to provide machine-readable schedules that calendar applications can import directly.

Key properties include:

• p-name: Event title
• p-description: Event summary or full description
• dt-start: Event start date and time
• dt-end: Event end date and time
• p-location: Event venue (often nested h-adr or h-card)
• p-organizer: Organizing entity (often nested h-card)
• u-url: Event website or details page

h-Product and h-Review: Commerce and Feedback

E-commerce websites utilize h-product to structure product information including names, descriptions, prices, brands, and inventory status. When combined with h-review for customer feedback, this markup enables search engines to display product ratings, price ranges, and review summaries directly in search results.

h-Product properties: p-name, p-brand, p-description, u-photo, p-price, p-sku, p-category

h-Review and h-Review-Aggregate properties: p-rating, p-reviewer, p-best, p-worst, p-count, p-summary

Implementation Patterns and Best Practices

Successful microformat implementation requires understanding the design patterns that enable clean, maintainable markup while ensuring reliable parsing across different tools and platforms. Working with experienced web developers ensures proper implementation that maximizes SEO benefits while maintaining clean, accessible code.

The Value-Class Pattern for Readable Dates

Date and time representation presents a unique challenge because machine parsers require standardized formats (ISO 8601) while human readers benefit from natural language presentation. The value-class pattern resolves this tension by separating the machine-readable datetime attribute from the human-readable text content.

Nested Microformats for Complex Data

Hierarchical data requires nested microformat structures where child entities become property values of parent entities. A blog post entry containing author information, for example, nests an h-card within the h-entry's author property.

The Rel Design Pattern for Link Semantics

Beyond the property-based microformats, the rel attribute provides link-level semantics: rel-me establishes identity relationships, rel-author links to author information, rel-tag categorizes content, rel-enclosure links to downloadable files.

SEO Benefits and Rich Snippets

Search engines invest significant resources in understanding webpage content beyond simple keyword matching. Structured data markup, including microformats, provides explicit signals about content meaning that enable enhanced search result presentations. Implementing these standards as part of a broader AI automation strategy can significantly improve how search engines interpret and display your content.

Types of Rich Snippets Enabled by Microformats

The practical impact on organic traffic can be substantial. Rich snippets outperform standard listings in click-through rates, with some categories seeing improvements exceeding 30%.

Structured Data Testing and Validation

Before deploying microformat markup to production, validation ensures correct implementation that search engines can parse successfully.

Recommended validation tools:

• Google Rich Results Test: Validates microformat markup and reports rich snippet eligibility
• Microformats Parser Test Suite: Tests parsing behavior across different implementations

Common Implementation Mistakes

1. Missing Root Class Names: Every microformat requires a root class name (h-*) before properties can be parsed
2. Conflicting Class Names: Avoid mixing styling classes with semantic microformat classes
3. Incorrect Date Formats: Machine-readable ISO 8601 format required in datetime attribute
4. Duplicate Properties: Multiple instances may be accepted but can cause confusion

Accessibility Considerations

Accessibility and microformats share a fundamental alignment in their emphasis on semantic meaning. Both approaches prioritize clear communication of content structure and relationships, benefiting users who rely on assistive technologies. For comprehensive accessibility audits and improvements, explore our accessibility audit services to ensure your microformat implementation meets accessibility standards.

Key accessibility principles:

• Use semantic HTML elements (headings, lists, address) alongside microformat classes
• Ensure contact information remains visible and accessible to screen readers
• Avoid hiding content with microformat-only markup invisible to users
• Test with actual assistive technology to verify proper communication

The class-based nature of microformat markup doesn't introduce accessibility barriers because the styling is controlled separately through CSS, and screen readers interpret content based on semantic HTML elements rather than class attributes.

Advanced Techniques and Integrations

Webmentions and Social Interactions

The Webmention specification builds directly on microformats to enable decentralized comments, likes, and other interactions between websites. When another site links to your content with an h-entry, a Webmention notification can trigger your site to display that interaction.

Bridg and Cross-Posting

The Bridgy service leverages microformats to connect personal websites with social platforms. When you mark up your content with h-entry and publish a link to a social platform, Bridgy can discover that link, retrieve your microformat-marked content, and generate a comment or cross-post.

Data Portability

Microformat markup creates inherently portable data structures. The same h-card used for author bylines can be exported for address book applications, and h-resume content can feed into recruitment platforms.

Sources

1. MDN Web Docs - Using microformats in HTML
2. Microformats.org Wiki - Main Page
3. Microformats.org Wiki - microformats2 Specification
4. WebFX - Ultimate Guide to Microformats: Reference and Examples