A small piece of HTML can change what a visitor sees or how the browser understands a page. In this lesson, you will explore microformats: semantic classes and h-card using a short example that you can inspect and change.
The Idea in Plain English
Microformats use ordinary class names, such as h-card and p-name, to describe information already visible on the page. They do not change the appearance of the page automatically.
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.
<div class="h-card">
<span class="p-name">Maya Torres</span>
<a class="u-email" href="mailto:[email protected]">Email Maya</a>
</div>What Each Part Does
- The anchor is a link when its href points to a destination.
- A div groups content without adding a special meaning.
- A span groups a small inline piece of text.
- class gives reusable identifiers for styling or structured conventions.
- href is the URL or fragment destination of a link.
The name and contact link remain visible, while tools that understand microformats can extract details.
Try It Yourself
Add a visible website link using class u-url and inspect the finished HTML.
Common Beginner Mistakes
- Adding machine-readable classes without meaningful visible contact information.
- Copying the code without checking whether its linked files or endpoints exist; sample addresses and file paths need real resources.
- Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.
Key Takeaways
- Microformats use ordinary class names, such as h-card and p-name, to describe information already visible on the page. They do not change the appearance of the page automatically.
- The name and contact link remain visible, while tools that understand microformats can extract details.
- Test the markup in a browser, and check accessibility and real-world behavior where relevant.