FSM Full Stack Masterclass
Platform under construction
HTML course badge

HTML Advanced

Advanced

Microdata

Learn Microdata with practical examples for rich HTML features, native browser behavior, accessibility, performance, SEO and live practice.

HTML advanced

Microdata adds machine-readable meaning to visible HTML content.

Microdata is a way to mark up visible content with itemtype, itemscope and itemprop attributes so machines can understand what the content represents.

It can describe products, organizations, people, courses, reviews, events and other structured entities when paired with a vocabulary such as Schema.org.

Today, JSON-LD is often preferred for structured data, but understanding microdata helps you understand how semantic data can live directly in HTML.

itemscope

Starts a structured item.

itemtype

Identifies the vocabulary type.

itemprop

Names a property on the item.

structured data

Machine-readable facts connected to visible content.

Syntax and behavior

Microdata marks up content that users can already see.

Do not create hidden fake facts. Structured data should match visible page content.

Visible course data marked up

<article itemscope itemtype="https://schema.org/Course">
  <h1 itemprop="name">HTML Fundamentals</h1>
  <p itemprop="description">A practical course about semantic HTML.</p>
  <span itemprop="provider">Full Stack Masterclass</span>
</article>

Structured data that does not match the page

<div itemscope itemtype="https://schema.org/Product">
  <meta itemprop="name" content="Hidden product nobody can see">
</div>

HTML quick reference

Reusable examples for quick reference.

Use these patterns when you need the syntax quickly. Each example has its own anchor, so search engines and readers can land directly on the exact pattern instead of only at the top of the lesson.

Semantic pattern

HTML pattern 1

A clean version of the markup from this lesson. Use it when you need the correct HTML shape quickly.

<article itemscope itemtype="https://schema.org/Course">
  <h1 itemprop="name">HTML Fundamentals</h1>
  <p itemprop="description">A practical course about semantic HTML.</p>
  <span itemprop="provider">Full Stack Masterclass</span>
</article>
What this gives you

Meaningful markup that stays understandable before CSS and JavaScript are added.

Editable lab starter

HTML pattern 2

The starting point from the practice lab. Change the HTML first, then use CSS only for presentation.

<main class="demo-card">
  <article itemscope itemtype="https://schema.org/Course">
    <h1 itemprop="name">HTML Advanced</h1>
    <p itemprop="description">Learn media, canvas, SVG and structured HTML.</p>
    <p>Provider: <span itemprop="provider">Full Stack Masterclass</span></p>
  </article>
</main>

<style>
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: Inter, system-ui, sans-serif;
  background: #07111f;
  color: white;
}

.demo-card {
  width: min(820px, calc(100% - 32px));
  padding: 34px;
  border-radius: 24px;
  background: #101a2d;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}

h1 {
  margin: 0 0 16px;
  font-size: clamp(34px, 7vw, 58px);
  line-height: 1;
}

h2 {
  margin: 22px 0 10px;
}

p, li {
  color: #cfd8e6;
  line-height: 1.7;
}

button {
  border: 0;
  border-radius: 999px;
  padding: 12px 16px;
  background: #8cffc1;
  color: #07111f;
  font-weight: 900;
}

a { color: #8cffc1; font-weight: 900; }
</style>
What this gives you

A complete practice snippet that shows how the HTML behaves in context.

Pattern to avoid

HTML pattern 3

A weak pattern from the lesson. Use it as a warning sign when reviewing real pages.

<div itemscope itemtype="https://schema.org/Product">
  <meta itemprop="name" content="Hidden product nobody can see">
</div>
What this gives you

A recognizable mistake you can search for and refactor.

Rules that matter

Advanced HTML is strongest when native behavior, accessibility and performance stay aligned.

These elements can create rich interfaces, but they still need clear purpose, safe fallbacks and production discipline.

Match visible content

Structured data should describe what users can actually see.

Use a real vocabulary

Schema.org is the common vocabulary for many web use cases.

Do not spam properties

Only mark up accurate, relevant information.

Prefer JSON-LD when appropriate

Many SEO workflows use JSON-LD because it is easier to maintain separately.

Validate structured data

Use structured data testing tools before relying on rich results.

Keep semantics first

Microdata enhances HTML; it does not replace meaningful content.

Production thinking

Advanced features are useful only when they still serve the user.

Why does this matter?

This matters because search engines and platforms increasingly care about entities, not only keywords.

Accessibility

Microdata is mainly for machines. Users still need normal headings, labels and readable content.

Production note

Structured data must stay synchronized with real page content. Wrong data can create SEO and trust problems.

SEO note

Correct structured data can help search engines understand entities, but it does not guarantee rich results or rankings.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

  • Add itemprop="url" to a course link.
  • Change the itemtype to another relevant Schema.org type and explain why.
  • Write one sentence about why hidden fake data is wrong.

Practice assignment

Do this before moving to the next lesson.

  1. Choose one visible content card.
  2. Add itemscope, itemtype and three itemprop attributes.
  3. Check that every structured value is visible to users too.

Try it yourself

Add microdata to a course card

Live preview

Self-check

Before you continue, prove that you own this lesson.

Advanced

Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.

  1. Can you explain what problem this lesson solves in a real website?
  2. Can you identify the most important tag or attribute from this lesson?
  3. Can you name one accessibility mistake this lesson helps prevent?
  4. Can you write one good example and one weak example without copying the page?
  5. Can you explain when you would use this in production and when you would avoid it?