[microformats] "headers", "scope"

[Joseph_Joey_Tribbiani]

How can you mark-up microformats' hCalendar code like followings, without attributes "headers", "scope" and "axis"?

(Why I raised this thread was that the attributes are available in HTML4 but not in HTML5. So, I want to know alternative method.)

Code: Select all

<table>
  <tbody>
    <tr>
      <th></th>
      <th id="room1">Stream 1 (<span class="location">Room1</span>)</th>
      <th id="room2">Stream 2 (<span class="location">Room2</span>)</th>
    </tr>
    <tr>
      <th id="td21045">
        <abbr class="dtstart" title="20081112T1315">1:15pm</abbr>
        - <abbr class="dtend" title="20081112T1400">2:00pm</abbr>
      </th>
      <td class="vevent summary" headers="room1 td21045">
        KOJIMA, Yoshio - "Future of the Oppappie!"
      </td>
      <td class="vevent summary" headers="room2 td21045">
        FUKUDA, Yasuo - "Anata toha Chigau'n desu."
      </td>
    </tr>
  </tbody>
</table>

* In this code, two "vevent" data share common "dtstart" field, "dtend" field and "location" field at TH element.

(The code is based on "microformats", Chapter 8, John Allsopp)

[zcorpan]

How can you mark-up microformats' hCalendar code like followings, without attributes "headers", "scope" and "axis"?

How about:

Code: Select all

<table>
  <tbody>
    <tr>
      <th></th>
      <th>Stream 1 (<span class="location">Room1</span>)</th>
      <th>Stream 2 (<span class="location">Room2</span>)</th>
    </tr>
    <tr>
      <th>
        <abbr class="dtstart" title="20081112T1315">1:15pm</abbr>
        - <abbr class="dtend" title="20081112T1400">2:00pm</abbr>
      </th>
      <td class="vevent summary">
        KOJIMA, Yoshio - "Future of the Oppappie!"
      </td>
      <td class="vevent summary">
        FUKUDA, Yasuo - "Anata toha Chigau'n desu."
      </td>
    </tr>
  </tbody>
</table>

?

(BTW, the <abbr>s should probably be <time datetime="2008-11-12T13:15"> instead with HTML5.)

(Why I raised this thread was that the attributes are available in HTML4 but not in HTML5. So, I want to know alternative method.)

headers="" is in HTML5.

[Joseph_Joey_Tribbiani]

Thank you for your repling, Mr. zcorpan.

I think the HTML4's code I wrote (that's based on John Allsopp's book) is a smart method to write a field-value of a structured data at separated place and to share it by multiple structured data. Then, I got to know the code is not available in HTML5, because some necessary attributes' lost. So, I woldered how its equivalent code can be written in HTML5. Thus, that's I'd like to know the EQUIVANT code in HTML5. It's hard to write, but, I would think your code isn't what I want. The relativeness between "vevent" and "dtstart"/"dtend"/"location" isn't expressed by the code.

Well, I heard "time" element for the first time. As you wrote, I also think the element may become alternate method to mark-up time data than using "abbr" element. (Of course, that's on http://microformats.org/).

[zcorpan]

Both the markup you posted and the markup I posted are valid HTML5 and they are semantically equivalent. You can see that the cells are properly associated in both cases using James's table inspector (the "smart headers" algorithm is probably closest to what's in HTML5 currently):

http://james.html5.org/tables/table_inspector.html

The algorithm in HTML5: http://www.whatwg.org/specs/web-apps/cu ... -semantics

[Joseph_Joey_Tribbiani]

To: Mr. zcorpan.

Thank you for your repling and I have to apologize you (and all the readers of this thread). It was my misunderstanding that "scope" attribute of TD is no more available in HTML5. Fact is that one of TH is obsoleted, but one of TD is still available.

By the way, after my first post, I realized that include pattern is also available as non-implicit version. That is...

Code: Select all

<a class="include" href="#..."></a>

You may be sure, the whole code is...

Code: Select all

<table>
  <tbody>
    <tr>
      <th></th>
      <th id="room1">Stream 1 (<span class="location">Room1</span>)</th>
      <th id="room2">Stream 2 (<span class="location">Room2</span>)</th>
    </tr>
    <tr>
      <th id="td21045">
        <abbr class="dtstart" title="20081112T1315">1:15pm</abbr>
        - <abbr class="dtend" title="20081112T1400">2:00pm</abbr>
      </th>
      <td class="vevent">
        <a class="include" href="#td21045"></a>
        <a class="include" href="#room1"></a>
        <span class="summary">KOJIMA, Yoshio - "Future of the Oppappie!"</span>
      </td>
      <td class="vevent">
        <a class="include" href="#td21045"></a>
        <a class="include" href="#room2"></a>
        <span class="summary">FUKUDA, Yasuo - "Anata toha Chigau'n desu."</span>
      </td>
    </tr>
  </tbody>
</table>

Of course, this is complicated and verbose. I think your code is the smartest and natural for HTML code writer.