itemprop глобальный атрибут HTML

Глобальный глобальный атрибут itemprop используется для добавления свойств к элементу. У каждого элемента HTML можно указать атрибут itemprop, а элемент itemprop состоит из пары «имя — значение». Каждая пара «имя — значение» называется свойством, а одна или несколько таких пар образуют элемент. Значения свойств — это строка или URL-адрес; их можно связывать с очень широким набором элементов, включая <audio>, <embed>, <iframe>, <img>, <link>, <object>, <source>, <track> и <video>.

Примеры

В примере ниже показан исходный код набора элементов с атрибутами itemprop, а затем таблица с полученными структурированными данными.

HTML

<div itemscope itemtype="http://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="../movies/avatar-theatrical-trailer.html" itemprop="trailer">
    Trailer
  </a>
</div>

Структурированные данные

Свойства

Значениями свойств могут быть строка или URL-адрес. Если строковое значение представляет собой URL-адрес, он указывается с помощью элемента <a> и его атрибута href, элемента <img> и его атрибута src либо других элементов, ссылающихся на внешние ресурсы или встраивающих их.

Три свойства со строковыми значениями

<div itemscope>
  <p>My name is <span itemprop="name">Neil</span>.</p>
  <p>My band is called <span itemprop="band">Four Parts Water</span>.</p>
  <p>I am <span itemprop="nationality">British</span>.</p>
</div>

Одно свойство «image» со значением в виде URL-адреса

<div itemscope>
  <img itemprop="image" src="google-logo.png" alt="Google" />
</div>

Если строковое значение сложно прочитать и понять человеку (например, это длинная последовательность цифр и букв), его можно отображать с помощью атрибута value элемента data, а более понятную человеку версию поместить в содержимое элемента (оно не является частью структурированных данных — см. пример ниже).

Элемент со свойством, значение которого — идентификатор товара

Идентификатор неудобен для восприятия человеком, поэтому вместо него используется название товара.

<h1 itemscope>
  <data itemprop="product-id" value="9678AOU879">The Instigator 2000</data>
</h1>

Для числовых данных можно использовать элемент meter и его атрибут value.

Элемент meter

<div itemscope itemtype="http://schema.org/Product">
  <span itemprop="name">Panasonic White 60L Refrigerator</span>
  <img src="panasonic-fridge-60l-white.jpg" alt="" />
  <div
    itemprop="aggregateRating"
    itemscope
    itemtype="http://schema.org/AggregateRating">
    <meter itemprop="ratingValue" min="0" value="3.5" max="5">
      Rated 3.5/5
    </meter>
    (based on <span itemprop="reviewCount">11</span>
    customer reviews)
  </div>
</div>

Аналогично, для данных, связанных с датой и временем, можно использовать элемент time и его атрибут datetime.

Элемент с одним свойством «birthday», значение которого — дата

<div itemscope>
  I was born on
  <time itemprop="birthday" datetime="1984-05-10">May 10th 1984</time>.
</div>

Свойства также могут представлять собой группы пар «имя — значение»: для этого элементу, объявляющему свойство, нужно задать атрибут itemscope. Каждое значение представляет собой либо строку, либо группу пар «имя — значение» (то есть элемент).

Внешний элемент, представляющий человека, и вложенный элемент, представляющий музыкальную группу

<div itemscope>
  <p>Name: <span itemprop="name">Amanda</span></p>
  <p>
    Band:
    <span itemprop="band" itemscope>
      <span itemprop="name">Jazz Band</span>
      (<span itemprop="size">12</span> players)
    </span>
  </p>
</div>

У внешнего элемента выше два свойства: «name» и «band». Значение свойства «name» — «Amanda», а «band» — самостоятельный элемент с двумя свойствами: «name» и «size». Значение свойства «name» музыкальной группы — «Jazz Band», а значение свойства «size» — «12». Внешний элемент в этом примере — это микроданные верхнего уровня. Элементы, не входящие в состав других элементов, называются микроданными верхнего уровня.

Все свойства отделены от своих элементов

Этот пример совпадает с предыдущим, но все свойства отделены от своих элементов.

<div itemscope id="amanda" itemref="a b"></div>
<p id="a">Name: <span itemprop="name">Amanda</span></p>
<div id="b" itemprop="band" itemscope itemref="c"></div>
<div id="c">
  <p>Band: <span itemprop="name">Jazz Band</span></p>
  <p>Size: <span itemprop="size">12</span> players</p>
</div>

В результате получается то же, что и в предыдущем примере. У первого элемента два свойства: «name» со значением «Amanda» и «band» со значением, равным другому элементу. У второго элемента также два свойства: «name» со значением «Jazz Band» и «size» со значением «12».

У элемента может быть несколько свойств с одинаковым именем и разными значениями.

Мороженое с двумя вкусами

<div itemscope>
  <p>Flavors in my favorite ice cream:</p>
  <ul>
    <li itemprop="flavor">Lemon sorbet</li>
    <li itemprop="flavor">Apricot sorbet</li>
  </ul>
</div>

В результате получается элемент с двумя свойствами, у каждого из которых имя «flavor», а значения — «Lemon sorbet» и «Apricot sorbet».

Элемент, вводящий свойство, может также вводить сразу несколько свойств. Это позволяет избежать дублирования, если некоторые свойства имеют одинаковое значение.

Элемент с двумя свойствами — «favorite-color» и «favorite-fruit», оба со значением «orange»

<div itemscope>
  <span
    itemprop="favorite-color
    favorite-fruit"
    >orange
  </span>
</div>

Одинаковые структурированные данные, размеченные двумя разными способами

Между следующими двумя примерами нет семантической разницы.

<figure>
  <img src="castle.jpeg" />
  <figcaption>
    <span itemscope><span itemprop="name">The Castle</span></span> (1986)
  </figcaption>
</figure>

<span itemscope><meta itemprop="name" content="The Castle" /></span>
<figure>
  <img src="castle.jpeg" />
  <figcaption>The Castle (1986)</figcaption>
</figure>

В обоих примерах есть figure с подписью, а также никак не связанный с figure элемент с парой «имя — значение», где имя — «name», а значение — «The Castle». Разница лишь в том, что если пользователь перетащит figcaption из документа, элемент будет включён в данные перетаскивания. Изображение, связанное с элементом, включено не будет.

Имена и значения

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

Примеры имён

Токены — это строки или URL-адреса. Элемент называется типизированным элементом, если он представляет собой URL-адрес. В противном случае это строка. Строки не могут содержать точку или двоеточие (см. ниже).

1. Если элемент типизированный, он должен быть одним из следующих:

   1. определённое имя свойства;
   2. допустимый URL-адрес, указывающий на определение словаря;
   3. допустимый URL-адрес, используемый в качестве имени собственного свойства элемента (то есть не определённого в общедоступной спецификации);

2. Если элемент не типизированный, он должен быть:

   1. строкой, не содержащей символов . (U+002E FULL STOP) и : (U+003A COLON), которая используется в качестве имени собственного свойства элемента (то есть не определённого в общедоступной спецификации).

Значение

Значение свойства в паре «имя — значение» определяется по первому подходящему случаю из следующего списка:

• Если у элемента есть атрибут itemscope

  • Значение — это элемент, созданный этим элементом

• Если элемент — это элемент meta

  • Значение — это значение атрибута content элемента

• Если элемент — это элемент audio, embed, iframe, img, source, track или video

  • Значение — это строка URL-адреса, полученная при разборе значения атрибута src элемента относительно документа узла (части API DOM микроданных) элемента на момент установки атрибута

• Если элемент — это элемент a, area или link

  • Значение — это строка URL-адреса, полученная при разборе значения атрибута href элемента относительно документа узла элемента на момент установки атрибута

• Если элемент — это элемент object

  • Значение — это строка URL-адреса, полученная при разборе значения атрибута data элемента относительно документа узла элемента на момент установки атрибута

• Если элемент — это элемент data

  • Значение — это значение атрибута value элемента

• Если элемент — это элемент meter

  • Значение — это значение атрибута value элемента

• Если элемент — это элемент time

  • Значение — это значение datetime элемента

В противном случае

• Значение — это textContent элемента.

Если значение свойства — это URL, свойство необходимо указывать с помощью элемента свойства URL-адреса. К элементам свойств URL-адресов относятся элементы a, area, audio, embed, iframe, img, link, object, source, track и video.

Порядок имён

Порядок имён относительно друг друга не имеет значения, однако если у определённого имени несколько значений, они следуют в заданном порядке.

В следующем примере у свойства «a» значения «1» и «2» именно в таком порядке, но не имеет значения, стоит ли свойство «a» перед свойством «b».

<div itemscope>
  <p itemprop="a">1</p>
  <p itemprop="a">2</p>
  <p itemprop="b">test</p>
</div>

Вот несколько равнозначных примеров:

<div itemscope>
  <p itemprop="b">test</p>
  <p itemprop="a">1</p>
  <p itemprop="a">2</p>
</div>

<div itemscope>
  <p itemprop="a">1</p>
  <p itemprop="b">test</p>
  <p itemprop="a">2</p>
</div>

<div id="x">
  <p itemprop="a">1</p>
</div>
<div itemscope itemref="x">
  <p itemprop="b">test</p>
  <p itemprop="a">2</p>
</div>

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

В этом примере атрибуты микроданных используются для представления следующих структурированных данных:

HTML

<dl
  itemscope
  itemtype="https://schema.org/Book"
  itemid="urn:isbn:0-374-22848-5<">
  <dt>Title</dt>
  <dd itemprop="title">Owls of the Eastern Ice</dd>
  <dt>Author</dt>
  <dd itemprop="author">Jonathan C Slaght</dd>
  <dt>Publication date</dt>
  <dd>
    <time itemprop="datePublished" datetime="2020-08-04">August 4 2020</time>
  </dd>
</dl>

Результат

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

См. также

• Другие глобальные атрибуты
• Другие глобальные атрибуты, связанные с микроданными:
  • itemid
  • itemref
  • itemscope
  • itemtype