In a few cases I have encountered a technique of adding RDFa to a part of HTML document and then styling it with CSS (e.g., using display: none;) as visually hidden. For instance, this can be seen in the rNews documentation (section Embedding Hidden Metadata):

<div  style="display:none">
  <div property="rnews:description">The questions about the...</div>
    <div property="rnews:language">en</div>
    <div rel="rnews:thumbnailUri"
         href="http://http://graphics8.nytimes.com/images/common/icons/t_wb_75.gif"</div>           
</div>

Is this an anti-pattern and should we always try to have corresponding information both in visual presentation of a page and in RDFa? Or, are there some legitimate uses of visually hidden RDFa data?

asked 13 Jun '11, 15:03

jindrichm's gravatar image

jindrichm
1.9k210
accept rate: 35%


I would not call it an anti-pattern because at least it does not make things worse. Hidden RDFa is better than no RDF and good but hidden RDFa is better than bad RDFa. In most cases hiding RDFa is problematic for two reasons: first, it may not be obvious for every consumer (both human and machine) that there is relevant RDF data in the HTML document. Second, the correspondence between machine-readable and human-readable data representation is lost, so the RDF data may easily contain very different information that the HTML document.

In my opinion the second problem is worse, so you may need to hide the RDFa to get a good representation. I bet that there are RDF graphs which cannot be serialized easily in an ordered tree and/or on a two-dimensional plane. But if you can create a Turtle serialization that is much smaller and easier to grasp than the list of the graph's triples, then you should also be able to create a good RDFa serialization.

EDIT By the way schema.org could also be motivated by the "interest to ensure that the information that they extract is based as much as possible on the visible content of the page as this reduces the opportunity for people to lie (or make honest mistakes) by providing one value in the metadata and another in the content of the page" see this article.

permanent link

answered 13 Jun '11, 17:45

Jakob's gravatar image

Jakob
1.9k211
accept rate: 10%

edited 14 Jun '11, 00:44

Why would someone include values intended for triples as content to display and then use CSS to hide it when they can use RDFa to encode as values to not be displayed? For example:

<span property="rnews:language" content="en"/>

Doesn't the "a" in "RDFa" refer to storing values in attributes? Or what am I missing here?

permanent link

answered 14 Jun '11, 09:03

bobdc's gravatar image

bobdc
4.1k7
accept rate: 15%

Yes! That's why I think hiding the RDFa-annotated text nodes with CSS might be an anti-pattern.

(14 Jun '11, 09:11) jindrichm jindrichm's gravatar image
1

OK, then I misunderstood what you originally meant by "visually hidden"--I would consider what I wrote above to be visually hidden and perfectly OK, but using CSS to hide RDFa data seems to indicate a lack of understanding of the full range of options that RDFa gives you. So I would consider the use of CSS to hide RDFa to be the anti-pattern, but if someone has a use case where it's the logical thing to do I'm willing to listen. (Hence all the weaselly qualifiers in my discussion of the issue.)

(14 Jun '11, 11:01) bobdc bobdc's gravatar image

First, a few arguments in favor of using invisible data content in RDFa are in[1]. Also note our two tools [2] and [3] that can generate RDFa snippets from other RDF syntaxes with ease, so you can e.g. model your data structures in nice Turtle and then derive the RDFa patterns automatically.

My main argument for the past three years of advocating this is that:

  1. It is way more productive to do so as compared to manually weaving in RDFa patterns into existing HTML page templates for non-trivial data structures (e.g. GoodRelations).

  2. In the case of dynamically generated content from templates using templating engines like Smarty or Jinja, the invisible content will be as current as the visible content, so the old argument of the data not being in sync with the visible content does mostly not hold.

  3. If the HTML is non valid / buggy, then the extraction of data from a part of invisible RDFa that itself is valid (e.g. no missing closing HTML elements) is way more reliable. HTML cleaners applied to buggy HTML can often only guess the intended tree structure and thus often attach properties to the wrong entities.

  4. The two principles of avoiding redundancy (DRY) and separation of concerns (keeping the modeling of rendering aspects separate from conceptual data modeling issues) conflict in the case of RDF in HTML.

As for the practical aspect, I recommend putting the block of invisible RDFa closely BEFORE the respective visible content. Search engines do not seem to like such blocks towards the end of the page.

Best wishes

Martin Hepp

[1] Hepp, Martin; García, Roberto; Radinger, Andreas: RDF2RDFa: Turning RDF into Snippets for Copy-and-Paste, Technical Report TR-2009-01, 2009. http://www.heppnetz.de/files/RDF2RDFa-TR.pdf

[2] http://www.ebusiness-unibw.org/tools/rdf2rdfa/

[3] http://rdf-translator.appspot.com/

permanent link

answered 12 Jun '12, 13:26

Martin%20Hepp's gravatar image

Martin Hepp
5013
accept rate: 50%

I'd note another strategy for hiding RDFa is to put it in the HEAD of the document, as is done in the Facebook Open Graph Protocol.

One reason for hiding is that this introduces clean physical separation of the RDFa from the rest of the document, so if I want to make major changes in the visual formatting I'm free to do that without concern that I'll break the RDFa.

permanent link

answered 12 Jun '12, 17:46

database_animal's gravatar image

database_animal ♦
8.4k1612
accept rate: 15%

My advice to alleviate issues would be to consider (RDFa) annotations in the semantics of your HTML and CSS rather than drop big hidden divs. Therefore ideally you should provide classes that represent annotations in different contexts i.e in cases where the HTML + content doesn't lend itself to inline annotation (and you have to embed rather like embedding metadata) and instances where it does.

It is important to recognise that RDFa is primarily a Semantic Web enabler not necessarily a way to annotate fragments of HTML (a secondary use case).

permanent link

answered 14 Jun '11, 07:54

William%20Greenly's gravatar image

William Greenly
5.1k412
accept rate: 13%

@bobdc I have one good reason to have RDFa markup hidden by CSS: to enhance user-experience. I agree, this sounds very odd, but in a purely visual context this should not be punished as an anti-pattern. Following is a good example of a panoramic image displayed. The goal is to show as much as possible of the image, but also provide the functionality to enable the user (and the machines) to gain more information about the object displayed on screen. 'Images speak a thousand words, except to machines!' Here is the example: example with hidden RDFa (This subject about 'hidden RDFa' might be an interersting thread on its own).

permanent link

answered 02 Aug '11, 08:22

snahl's gravatar image

snahl
112
accept rate: 0%

edited 02 Aug '11, 08:25

Yes, visually hidden RDFa is OK, but hiding it with CSS is an anti-pattern when you can hide it by using invisible <span> elements with RDFa in attributes.

(02 Aug '11, 08:28) jindrichm jindrichm's gravatar image

No one is saying that hidden RDFa is an anti-pattern. The point is that it's easy enough to have hidden RDFa without CSS, so using CSS to hide it is the anti-pattern.

(02 Aug '11, 08:34) bobdc bobdc's gravatar image

@jindrichm fair enough. So what would you recommend to be an optimal solution for that example I have provided?

(02 Aug '11, 08:38) snahl snahl's gravatar image

If you really don't want the user to see the RDFa content, then use a series of <span> elements with literals in content attribute and RDF resources in resource attribute. E.g., <span property="geo:lat" content="46.429768"></span> or <span rel="cc:license" resource="http://creativecommons.org/licenses/by-nc-sa/2.5/ch/"></span>. But if you want to be able to toggle the display of RDFa information as it is in your example case, hiding it temporarily with CSS is OK.

(02 Aug '11, 08:51) jindrichm jindrichm's gravatar image

@jindrichm The page as it appears at first instance is perfectly fine - some information is hidden initially and on purpose to provide more footprint for displaying the image. The goal is that the user can toggle to display addl. information. So the way the information is hidden initially and available to the user upon request seems alright - at least to me. How about search-bots? How can they differentiate between the creators intention and then decide?

(02 Aug '11, 09:10) snahl snahl's gravatar image

Yes, I think this solution is perfectly fine for this case. Crawlers will get the visually hidden information, however, they may treat it as "untrustworthy" because of the possible abuse for SEO reasons (see e.g., http://www.google.com/support/webmasters/bin/answer.py?answer=66353).

(02 Aug '11, 09:22) jindrichm jindrichm's gravatar image
showing 5 of 6 show 1 more comments
Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Question tags:

×96
×36
×29
×18
×9

question asked: 13 Jun '11, 15:03

question was seen: 3,478 times

last updated: 12 Jun '12, 17:46