A small piece of HTML can change what a visitor sees or how the browser understands a page. In this lesson, you will explore microdata itemscope, itemtype, and itemprop patterns using a short example that you can inspect and change.
The Idea in Plain English
Microdata stores machine-readable properties directly on visible HTML elements. An itemscope creates an item, itemtype identifies its vocabulary, and itemprop names a property.
You can test this using a small local HTML file. Change one part at a time and check the result in the browser before adding more code.
A Working Example
Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.
<article itemscope itemtype="https://schema.org/Person">
<h2 itemprop="name">Maya Rivera</h2>
<p itemprop="jobTitle">Web designer</p>
<a itemprop="url" href="/team/maya.html">View profile</a>
</article>What Each Part Does
- The anchor is a link when its href points to a destination.
- An article identifies a self-contained piece of content.
- The h2 identifies a major subsection.
- href is the URL or fragment destination of a link.
The card remains readable to humans; software that understands the vocabulary can also extract the structured fields.
Try It Yourself
Look at the itemprop values on the visible card; they are the facts readers and parsers should agree on.
Common Beginner Mistakes
- Adding attributes without the enclosing item, or marking up information that visitors cannot find.
- Changing several parts of the example at once, making it difficult to see which part caused a different result.
- Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.
Key Takeaways
- Microdata stores machine-readable properties directly on visible HTML elements. An itemscope creates an item, itemtype identifies its vocabulary, and itemprop names a property.
- The card remains readable to humans; software that understands the vocabulary can also extract the structured fields.
- Test the markup in a browser, and check accessibility and real-world behavior where relevant.