HTML
Project: Schema.org markup
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 scopeitemtype — 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
Next lesson: Itemtype and itemid
