`itemscope` Глобальный атрибут HTML

itemscope — это логический глобальный атрибут, определяющий область действия связанных метаданных. Указание атрибута itemscope для элемента создает новый элемент данных, в результате чего с этим элементом связывается ряд пар «имя — значение».

Связанный атрибут itemtype используется для указания действительного URL словаря (например, schema.org), описывающего элемент данных и контекст его свойств. Во всех приведенных ниже примерах используется словарь schema.org.

Для любого HTML-элемента можно указать атрибут itemscope. У элемента itemscope, у которого нет связанного itemtype, должен быть связанный itemref.

Примечание: Подробнее об атрибутах itemtype см. на странице https://schema.org/Thing

Примечания по использованию

Атрибуты itemscope и id

При указании атрибута itemscope для элемента создается новый элемент данных. Он состоит из группы пар «имя — значение». Для элементов с атрибутом itemscope и атрибутом itemtype можно также указать атрибут id. Атрибут id можно использовать, чтобы задать глобальный идентификатор для нового элемента данных. Глобальный идентификатор позволяет связывать этот элемент с другими элементами данных на веб-страницах.

Примеры

Представление структурированных данных о фильме

В следующем примере атрибуту itemtype задается значение "http://schema.org/Movie", а также указываются четыре связанных атрибута itemprop.

itemscope	Itemtype	Movie
	itemprop	(имя itemprop)	(значение itemprop)
	itemprop	director	Джеймс Кэмерон
	itemprop	genre	Научная фантастика
	itemprop	name	Аватар
	itemprop	Trailer	https://youtu.be/0AY1XIkX7bY

<div itemscope itemtype="https://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span>
    Director: <span itemprop="director">James Cameron</span> (born August 16,
    1954)
  </span>
  <span itemprop="genre">Science fiction</span>
  <a href="https://youtu.be/0AY1XIkX7bY" itemprop="trailer">Trailer</a>
</div>

Представление структурированных данных о рецепте

В следующем примере используются четыре атрибута itemscope. Каждый атрибут itemscope задает область действия соответствующего ему атрибута itemtype. itemtype, Recipe, AggregateRating и NutritionInformation в следующем примере относятся к структурированным данным о рецепте из schema.org, как указано в первом атрибуте itemtype, http://schema.org/Recipe.

itemscope	itemtype	Recipe
	itemprop	name	Праздничный яблочный пирог бабушки
	itemprop	image	https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg
	itemprop	datePublished	2022-11-05
	itemprop	description	Это рецепт яблочного пирога моей бабушки. Мне нравится добавлять немного мускатного ореха.
	itemprop	prepTime	PT30M
	itemprop	cookTime	PT1H
	itemprop	totalTime	PT1H30M
	itemprop	recipeYield	1 пирог диаметром 9" (8 порций)
	itemprop	recipeIngredient	Тонко нарезанные яблоки: 6 чашек
	itemprop	recipeIngredient	Белый сахар: 3/4 чашки
	itemprop	recipeInstructions	1. Нарежьте и очистите яблоки. 2. Смешайте сахар и корицу. Для кислых яблок добавьте еще сахара.
	itemprop	author [Person]
	itemprop	name	Кэрол Смит
itemscope	itemprop[itemtype]	aggregateRating [AggregateRating]
	itemprop	ratingValue	4.0
	itemprop	reviewCount	35
itemscope	itemprop[itemtype]	nutrition [NutritionInformation]
	itemprop	servingSize	1 кусок среднего размера
	itemprop	calories	250 калорий
	itemprop	fatContent	12 г

Примечание: Удобный инструмент для извлечения структур микроданных из HTML — инструмент проверки расширенных результатов от Google. Попробуйте проверить с его помощью приведенный здесь HTML.

HTML

<div itemscope itemtype="https://schema.org/Recipe">
  <h2 itemprop="name">Grandma's Holiday Apple Pie</h2>
  <img
    itemprop="image"
    src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg"
    width="50"
    height="50" />
  <p>
    By
    <span itemprop="author" itemscope itemtype="https://schema.org/Person">
      <span itemprop="name">Carol Smith</span>
    </span>
  </p>
  <p>
    Published:
    <time datetime="2022-11-05" itemprop="datePublished">
      November 5, 20022
    </time>
  </p>
  <span itemprop="description">
    This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.
  </span>
  <br />
  <span
    itemprop="aggregateRating"
    itemscope
    itemtype="https://schema.org/AggregateRating">
    <span itemprop="ratingValue">4.0</span> stars based on
    <span itemprop="reviewCount">35</span> reviews
  </span>
  <br />
  Prep time: <time datetime="PT30M" itemprop="prepTime">30 min</time>
  <br />
  Cook time: <time datetime="PT1H" itemprop="cookTime">1 hour</time>
  <br />
  Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min</time>
  <br />
  Yield: <span itemprop="recipeYield">1 9" pie (8 servings)</span>
  <br />
  <span
    itemprop="nutrition"
    itemscope
    itemtype="https://schema.org/NutritionInformation">
    Serving size: <span itemprop="servingSize">1 medium slice</span><br />
    Calories per serving: <span itemprop="calories">250 cal</span><br />
    Fat per serving: <span itemprop="fatContent">12 g</span><br />
  </span>
  <p>
    Ingredients:<br />
    <span itemprop="recipeIngredient">Thinly-sliced apples: 6 cups<br /></span>
    <span itemprop="recipeIngredient">White sugar: 3/4 cup<br /></span>
    …
  </p>
  Directions: <br />
  <div itemprop="recipeInstructions">
    1. Cut and peel apples<br />
    2. Mix sugar and cinnamon. Use additional sugar for tart apples. <br />
    …
  </div>
</div>

Результат

Спецификации

Спецификация
HTML> # attr-itemscope>

См. также

Другие глобальные атрибуты
Другие связанные с микроданными глобальные атрибуты:

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/itemscope

itemscope Глобальный атрибут HTML