HTML Course 15.6 Microformats and structured data (overview)

15.6 Microformats and Structured Data (Overview)

Microformats and structured data are methods to annotate HTML content so that machines—search engines, crawlers, and parsers—can understand the meaning of information on web pages. While Microformats leverage existing HTML attributes and class names, structured data encompasses broader syntaxes such as Microdata, RDFa, and JSON-LD, often based on vocabularies like schema.org.

1. Microformats

• Definition: A set of simple, open data formats built upon existing and widely adopted HTML tags, attributes, and values.
• Key Features:
  • Uses standard class names (e.g., h-card, p-name, u-url).
  • Human- and machine-readable.
  • No additional attributes beyond class and rel.
• Common Types: h-card (contact info), h-event (calendar), h-review, h-recipe, h-feed, etc.

Example: h-card (Contact Card)

  
  
    John Doe
  
  
  
  
  

    Example Corp —
    Lead Developer
  
  
  john@example.com

2. Structured Data Formats

Structured data adds semantic annotations to HTML using dedicated attributes or JSON. Major syntaxes include:

• Microdata: Uses itemscope, itemtype, and itemprop.
• RDFa: Uses vocab, typeof, property, etc.
• JSON-LD: Embeds a JSON object inside a <script type='application/ld+json'>.

2.1 Microdata Example

  
  John Doe

  
  
  
  

    123 Main St,
    Anytown,
    12345
  

2.2 RDFa Example

  
  John Doe

  
  
  
  

    123 Main St,
    Anytown,
    12345
  

2.3 JSON-LD Example

3. Comparison of Formats

4. Best Practices

• Prefer JSON-LD for new projects (recommended by major search engines).
• Include structured data in the <head> or just before the closing </body>.
• Validate annotations using tools like Google’s Structured Data Testing Tool.
• Maintain consistency between visible content and structured data.
• Use the smallest vocabulary necessary to describe the content.

By combining microformats or structured data syntaxes with schema.org vocabularies, you enhance the machine-readability of your content, increase the likelihood of rich snippets in search results, and improve overall accessibility of data.