Project: Schema.org markup

HTML course · Advanced · Lesson 30/56

Overview of the 5-lesson project: structured data markup.

Project: Schema.org markup

In this 5-lesson project you'll add Schema.org structured data to a news article. Each lesson adds one piece; by the final lesson you'll have a fully marked-up article.

We'll use the article Education in the AI Era throughout the project.

Roadmap:

Lesson 1: Article skeleton
Lesson 2: itemscope and itemtype
Lesson 3: itemprop values
Lesson 4: Nested Person type
Lesson 5: Publisher and wrap-up

What is structured data?

Search engines read your HTML but can't always tell what it means. They must guess whether an <h1> is an article title or a site name.

Structured data removes that guesswork. With the Schema.org vocabulary you give content a type and properties; search engines then understand your page correctly.

In this project we'll use the microdata method: adding attributes like itemscope, itemtype and itemprop to HTML tags.

The microdata method

There are several ways to add structured data to HTML. In this project we'll use the microdata method.

Microdata adds three attributes to HTML tags:

itemscope — starts a new scope
itemtype — specifies the type (as a URL)
itemprop — names a property

These three attributes sit alongside ordinary HTML attributes; they don't change how the page looks. You'll learn them one by one in the next lessons.

Exercise Write the article skeleton

Write an empty HTML document skeleton: <!DOCTYPE html>, <html lang="en">, <head> (with a non-empty <title>) and <body>.

Inside body, open an <article> element; place an <h1> (article title) and a <time> (publish date) inside it.

Show example solution

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Education in the AI Era</title>
  </head>
  <body>
    <article>
      <h1>Education in the AI Era</h1>
      <p>Published: <time>2026-03-15</time></p>
      <p>AI is reshaping the relationship between teacher and student in classrooms.</p>
    </article>
  </body>
</html>

Test yourself

What does structured data markup do?
- Adds images and colors to the page
- Tells search engines what the content means
- Increases the page load speed
- Generates CSS styles automatically
Show answer

Tells search engines what the content means — Correct. Structured data describes the type and properties of content.
Match each lesson with the piece it adds

Lesson 1

Document skeleton
Lesson 2

itemscope and itemtype
Lesson 3

itemprop values
Lesson 4

Nested Person type
Lesson 5

Publisher Organization

All lessons in Advanced

Project: Schema.org markup