4

Suppose I have an HTML paragraph that I'm interested in annotating (i.e. add some context that shouldn't be displayed, just add meaning to the text)

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

What is the right semantic tag that should be used in this case?

Yuval Adam
  • 161,610
  • 92
  • 305
  • 395
  • 2
    1. Who is supposed to make use of the annotations? Only you? 2. Do the annotations only consist of plain text? 3. You tagged this with [tag:schema.org] -- Why? Does it have to use types/properties from the vocabulary Schema.org somehow? 4. You also tagged it with [tag:rdfa] -- why? Is the solution required to use RDFa? 5. As you tagged it with [tag:semantic-web], does the solution have to be based on RDF? – unor Jan 21 '16 at 12:37

3 Answers3

1

You don't use a specific HTML tag, but rather semantic annotation. You have two options: Microdata and RDFa.

Both have similar capabilities and are understood by search engine crawlers. That said Google is a supported of Microdata.

For ready-to-use examples you can refer to schema.org website. Each term definition show usage with both serializations. Your HTML could be:

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>

As you can see I simply use <span> to encapsulate annotated text. Other that that RDFa and Microdata aren't that different.

Also, do have a look at RDF Translator app. It will help you fiddle with your annotations.

Community
  • 1
  • 1
Tomasz Pluskiewicz
  • 3,622
  • 1
  • 19
  • 42
  • Your answer is irrelevant because it doesn't address my specific need for an annotation. This isn't a person, or a description, I just want to add semantic annotation to a piece of text. – Yuval Adam Jan 20 '16 at 12:03
  • 1
    Then I find your question incomplete and the tags used misleading. The Person is just an example. This is how you would annotate markup in the Semantic Web. You define a boundary of the featured object (`itemscope`/`typeof`) and inside annotate the objects attributes (`itemprop`/`property`). – Tomasz Pluskiewicz Jan 20 '16 at 16:51
  • 1
    Please expand your question so that your intent is clear. – Tomasz Pluskiewicz Jan 20 '16 at 16:52
1

There is a specific tag for this case, specifying semantic meaning without showing the content. This is done with the meta tag with itemprop and content properties, and is well explained in the Getting Started section of schema.org:

3c. Missing/implicit information: use the meta tag with content

Sometimes, a web page has information that would be valuable to mark up, but the information can't be marked up because of the way it appears on the page. The information may be conveyed in an image (for example, an image used to represent a rating of 4 out of 5) or a Flash object (for example, the duration of a video clip), or it may be implied but not stated explicitly on the page (for example, the currency of a price).

In these cases, use the meta tag along with the content attribute to specify the information. Consider this example—the image shows users a 4 out of 5 star rating:

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

Here is the example again with the rating information marked up.

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

This technique should be used sparingly. Only use meta with content for information that cannot otherwise be marked up.

marcanuy
  • 23,118
  • 9
  • 64
  • 113
0

You might consider using the "Custom Data Attributes". For example: <p data-custom-name="any-value">...</p>.

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

VorganHaze
  • 1,887
  • 1
  • 12
  • 35