Семантические элементы HTML для добавления пользовательских данных аннотации

Предположим, у меня есть абзац HTML, который я хочу аннотировать (т.е. добавить некоторый контекст, который не должен отображаться, просто добавить смысл в текст)

<p>The ultimate measure of a man is not where he stands 
in moments of <tag data="some custom annotation">comfort and convenience</tag>,
but where he stands at times of challenge and controversy.</p>

Какой правильный семантический тег следует использовать в этом случае?

Источник

2 ответа

Решение

Для этого случая есть специальный тег, определяющий семантическое значение без отображения содержимого. Это сделано с meta пометить с itemprop а также content свойства, и это хорошо объяснено в разделе Начало работы на schema.org:

3в. Отсутствующая / неявная информация: используйте метатег с контентом

Иногда на веб-странице есть информация, которую было бы полезно разметить, но эту информацию нельзя разметить из-за способа ее отображения на странице. Информация может передаваться в изображении (например, изображении, используемом для представления рейтинга 4 из 5) или в объекте Flash (например, продолжительности видеоклипа), или оно может подразумеваться, но не указывается явно на странице (например, валюта цены).

В этих случаях используйте метатег вместе с атрибутом содержимого для указания информации. Рассмотрим этот пример - на рисунке показано, как пользователи получают оценку 4 из 5:

<div itemscope itemtype="http://schema.org/Offer">
  <span itemprop="name">Blend-O-Matic</span>
  <span itemprop="price">$19.95</span>
  <img src="four-stars.jpg" />
  Based on 25 user ratings
</div>

Вот снова пример с размеченной информацией о рейтинге.

<div itemscope itemtype="http://schema.org/Offer">
  <span itemprop="name">Blend-O-Matic</span>
  <span itemprop="price">$19.95</span>
  <div itemprop="reviews" itemscope itemtype="http://schema.org/AggregateRating">
    <img src="four-stars.jpg" />
    <meta itemprop="ratingValue" content="4" />
    <meta itemprop="bestRating" content="5" />
    Based on <span itemprop="ratingCount">25</span> user ratings
  </div>
</div>

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

Источник

Вы не используете определенный тег HTML, а скорее семантическую аннотацию. У вас есть два варианта: микроданные и RDFa.

Оба имеют схожие возможности и понятны сканерам поисковых систем. Тем не менее, Google поддерживается Microdata.

Для получения готовых примеров вы можете обратиться на http://schema.org/. Каждое определение термина показывает использование с обеими сериализациями. Ваш HTML может быть:

Microdata

<p itemscope itemtype="http://schema.org/Person">
  The ultimate measure of a man is not where he stands in moments of 
  <span itemprop="description">comfort and convenience</span>,
  but where he stands at times of challenge and controversy.
</p>

RDFa

<p vocab="http://schema.org/" typeof="Person">
  The ultimate measure of a man is not where he stands in moments of 
  <span property="description">comfort and convenience</span>,
  but where he stands at times of challenge and controversy.
</p>

Как видите, я просто использую <span> инкапсулировать аннотированный текст. Кроме того, что RDFa и Microdata не так уж отличаются.

Кроме того, посмотрите на приложение RDF Translator. Это поможет вам возиться с вашими аннотациями.

Источник

Вы можете рассмотреть возможность использования "Пользовательских атрибутов данных". Например:<p data-custom-name="any-value">...</p>.

См. https://html5doctor.com/html5-custom-data-attributes/ и https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes.

Источник
Другие вопросы по тегам