Including links inside properties with RDFa Lite and schema.org vocabulary

Question

I want to link to a specific page for a content author but my RDFa seems to get misinterpreted.

In the example below I want to define a Photograph with an author property, which itself is Person with a name. And I want the name to be a link to a page with all of the contributor's content.

<div typeof="Photograph" resource="/photo/5" vocab="http://schema.org/">
    <p property="author" typeof="Person">
        Contributed by:
        <a href="/contributor/5" title="Contributions from Weston">
            <span property="name">Weston</span>
        </a>
    </p>
</div>

But trying to validate I get the following Turtle format results from the W3C Validator

@prefix ns1: <http://www.w3.org/ns/rdfa#> .
@prefix ns2: <http://schema.org/> .

<> ns1:usesVocabulary ns2: .

</contributor/5> ns2:name "Weston" .

</photo/5> a ns2:Photograph;
    ns2:author [ a ns2:Person ] .

Which looks to me like the name is not associated with the Person, but with the resource /contributor/5.

Answer 1

You need to have the href attribute (the one containing your Person URI) in the same HTML element as property and typeof, like this:

<div typeof="Photograph" resource="/photo/5" vocab="http://schema.org/">
    <p>
        Contributed by:
        <a property="author" typeof="Person" href="/contributor/5" title="Contributions from Weston">
            <span property="name">Weston</span>
        </a>
    </p>
</div>

For testing your markup, I highly recommend http://rdfa.info/play/ for live debugging :)

Answer 2

As you noticed the href causes describing a new resource.

There is another possibility to solve it: keep your code like it is and simply add an empty property attribute to the a element:

<div typeof="Photograph" resource="/photo/5" vocab="http://schema.org/">
    <p property="author" typeof="Person">
        Contributed by:
        <a href="/contributor/5" title="Contributions from Weston" property="">
            <span property="name">Weston</span>
        </a>
    </p>
</div>

This will be the turtle result:

@prefix ns1: <http://www.w3.org/ns/rdfa#> .
@prefix ns2: <http://schema.org/> .

<> ns1:usesVocabulary ns2: .

</photo/5> a ns2:Photograph;
    ns2:author [ a ns2:Person;
            ns2:name "Weston" ] .

I found this solution in some official guides like the HTML Data Guide: http://www.w3.org/TR/html-data-guide/