Re: Microdata: The Itemref element

On Mon, Oct 19, 2009 at 8:33 AM, Olivier GENDRIN
<olivier.gendrin@gmail.com> wrote:
> On Mon, Oct 19, 2009 at 3:08 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
>> You're using <itemref> incorrectly, though.  I don't understand what
>> you're even trying to do in this example.  <itemref> is a void element
>> (doesn't contain anything, doesn't have an end tag).  There's nothing
>> with @itemscope to actually define a microdata item.  This whole
>> example is very incorrect, so it doesn't really matter that table
>> magic screws it up.
>
> Damn, you're right, I'm too used to the xhtml notation.
>
> Ok, having read the spec, I refine my example :
>
>
> <div id="x"><p itemprop="a">1</p>
>  <div>
>    <p itemprop="b">test</p>
>    <p itemprop="a">2</p>
>    <itemref refid="y">
>    <table>
>     <tbody>
>       <tr>
>         <itemref refid="x">
>           <td itemprop="b">test</td>
>           <td itemprop="a">2</td>
>         </itemref>
>       </tr>
>     </tbody>
>    </table>
>  </div>
>  <div id="y"><p itemprop="a">1</p>
> </div>
>
> Would lead in Safari 4 and FF3.5 to a DOM equivalent to :
>
> <div id="x"><p itemprop="a">1</p>
>  <div>
>    <p itemprop="b">test</p>
>    <p itemprop="a">2</p>
>    <itemref refid="y">
>    <itemref refid="x">
>    <table>
>     <tbody>
>       <tr>
>           <td itemprop="b">test</td>
>           <td itemprop="a">2</td>
>         </itemref>
>       </tr>
>     </tbody>
>    </table>
>  </div>
>  <div id="y"><p itemprop="a">1</p>
> </div>
>
> (if i'm not making a huge mistake)

Sorry, but you are.  ;_;  Again, <itemref> is a void element.  It
doesn't have children.  It doesn't even have an end tag.  It just sits
there and expresses something.  I think you might be trying for
something like this:

<table>
  <tr itemscope>
    <td itemprop=a>foo</td>
    <td itemprop=b>bar</td>
    <itemref refid=x>
  </tr>
</table>
<p id=x itemprop=c>baz</p>
[1]

In this markup, the <itemref> is foster-parented to becoming a sibling
of the <table>, which breaks the markup.  This can be worked around in
at least two ways.  One way is to move the itemprop on one of the
<td>s into a child element (a div or span), and place the <itemref> in
the td as well:

<table>
  <tr itemscope>
    <td>
      <itemref refid=x>
      <span itemprop=a>foo</span>
    </td>
    <td itemprop=b>bar</td>
  </tr>
</table>
<p id=x itemprop=c>baz</p>

Another way is to move the @itemscope out of the table entirely, and
refer to the row with an <itemref>:

<table>
  <tr id=y>
    <td itemprop=a>foo</td>
    <td itemprop=b>bar</td>
  </tr>
</table>
<div itemscope>
  <p itemprop=c>baz</p>
  <itemref refid=y>
</div>

1: http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Ctitle%3ETable%20foster-parenting%20of%20%26lt;itemref%3E%3C/title%3E%0A%3Ctable%3E%0A%20%20%3Ctr%20itemscope%3E%0A%20%20%20%20%3Ctd%20itemprop%3Da%3Efoo%3C/td%3E%0A%20%20%20%20%3Ctd%20itemprop%3Db%3Ebar%3C/td%3E%0A%20%20%20%20%3Citemref%20refid%3Dx%3E%0A%20%20%3C/tr%3E%0A%3C/table%3E%0A%3Cp%20id%3Dx%20itemprop%3Dc%3Ebaz%3C/p%3E

~TJ

Received on Monday, 19 October 2009 14:10:14 UTC