HTML - Microdata & Data Attributes

Overview

Estimated time: 25–35 minutes

Microdata

<div itemscope itemtype="https://schema.org/Person">
  <span itemprop="name">Ada Lovelace</span>
  <img itemprop="image" src="/ada.jpg" alt="Portrait of Ada">
</div>

data-* attributes

<button data-user-id="42" data-action="save">Save</button>

Common Pitfalls

• Storing presentational info in data-* (keep for data/behavior, not styles).

Exercises

1. Mark up a product with itemscope/itemprop using schema.org/Product.