CodeBlanks Logo Icon CodeBlanks
Login Register

Itemprop

HTML course · Advanced · Lesson 32/56

Use headline, datePublished and author itemprops.

What is itemprop?

After giving an element a type, you break its content into pieces with itemprop. Each itemprop carries a property name.

Three common properties on an article:

  • headline — article title (added to h1)
  • datePublished — publish date (added to time)
  • author — author (added to a span)

Example: <h1 itemprop="headline">...</h1>. Search engines then know the heading is the article's title.

Put the itemprop on the right element

The location of itemprop matters as much as its name. headline belongs on the heading, datePublished on the time element.

A misplaced itemprop misleads search engines. Use <span itemprop="author">Alex Carter</span> so the author name lives inside the element that carries the author property.

The content must be non-empty: an empty itemprop is useless.

Exercise Add itemprop to h1, time and an author span

Take the article from the previous step. Add itemprop="headline" to <h1> and itemprop="datePublished" to <time>.

Also add a new <span itemprop="author">Alex Carter</span> element to mark the author's name.

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 itemscope itemtype="https://schema.org/Article" itemid="/articles/education-in-the-ai-era">
      <h1 itemprop="headline">Education in the AI Era</h1>
      <p>Published: <time itemprop="datePublished">2026-03-15</time></p>
      <p>Author: <span itemprop="author">Alex Carter</span></p>
      <p>AI is reshaping the relationship between teacher and student in classrooms.</p>
    </article>
  </body>
</html>

Test yourself

  1. Which itemprop is used for the article title?

    <h1 itemprop="...">Title</h1>
    • headline
    • title
    • name
    • heading
    Show answer

    headline — Correct. The Article type names the title property headline.

  2. Add the headline itemprop to the h1 tag

    <h1 ____>Education in the AI Era</h1>
    Show answer 
    <h1 itemprop="headline">Education in the AI Era</h1>

  3. Match each itemprop with its content

    headline
    Article title
    datePublished
    Publish date
    author
    Author
    name
    Person/org name

All lessons in Advanced

1 Advanced media

  1. Lazy loading
  2. Decoding async
  3. Srcset and sizes
  4. Width/height and CLS
  5. Preload and prefetch
  6. Summary - Performance gallery

2 Picture and responsive images

  1. Picture and source
  2. Media attribute
  3. Type attribute
  4. Aspect ratio
  5. Background vs img
  6. Summary - Responsive hero

3 Project: Video player

  1. Project: Accessible video player
  2. Video skeleton
  3. Track and captions
  4. Poster and preview
  5. Project final - Video player

4 Complex forms

  1. Form autocomplete
  2. Hidden input
  3. File upload
  4. Range and color
  5. Output and form events
  6. Summary - Settings panel

5 Metadata and SEO

  1. Meta description
  2. Open Graph
  3. Twitter card
  4. Canonical and hreflang
  5. Title and slug strategy
  6. Summary - SEO package

6 Project: Schema.org markup

  1. Project: Schema.org markup
  2. Itemtype and itemid
  3. Itemprop
  4. Nested itemtype
  5. Project final - Structured data

7 Web components HTML

  1. Template element
  2. Slot element
  3. Custom element names
  4. Shadow DOM skeleton
  5. Declarative shadow DOM
  6. Summary - Card template

8 Templates and partials

  1. Server-rendered vs client
  2. Partial HTML
  3. Data attributes
  4. Hydration hooks
  5. Noscript and progressive
  6. Summary - Component skeleton

9 Project: Dashboard widget

  1. Project: Dashboard widget
  2. Widget skeleton
  3. Visual data structure
  4. Template and slot
  5. Project final - Widget

10 Advanced final

  1. Challenge - Responsive image
  2. Challenge - Accessible video
  3. Challenge - Complex form
  4. Challenge - SEO and structured data
  5. Challenge - Advanced capstone