itemprop

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

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

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

<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.

<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.

<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» и значениями «Лимонный сорбет» и «Абрикосовый сорбет».

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

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

<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>

Оба содержат изображение с подписью, и оба, совершенно независимо от изображения, содержат элемент со свойством «name» со значением «Замок». Единственное различие состоит в том, что если пользователь перетащит подпись изображения из документа, то элемент будет включён в данные перетаскивания. Ассоциированное с элементом изображение не будет включено.

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

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

1. Если элемент — типизированный элемент, он должен быть либо:
   1. Определённым именем свойства, или
   2. Действительным URL-адресом, ссылающимся на определение словаря, или
   3. Действительным URL-адресом, используемым в качестве имени свойства элемента, не определённого в общедоступной спецификации.
2. Если элемент не типизированный элемент, он должен быть:
   1. Строкой, которая не содержит символов «.» (U+002E ПОЛНАЯ ТОЧКА) и символов «:» (U+003A ДВОЕТОЧИЕ) и используется в качестве имени свойства элемента, не определённого в общедоступной спецификации.

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

• Если у элемента есть 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