2

HTML5 要素を使用して、書式設定にテーブルを使用する「ページ」のコードをアウトライン化できますか? 例えば：

<section id="posts">
  <tr id="posts-title-row">
    <header><td id="posts-title">
      <h2>Latest Posts</h2>
    </td></header>
  </tr>
  <tr id="posts-row">
    <article><td>
      <p>Maecenas faucibus mollis interdum.</p>
    </td></article>
    <article><td>
      <p>Maecenas faucibus mollis interdum.</p>
    </td></article>
    <article><td>
      <p>Maecenas faucibus mollis interdum.</p>
    </td></article>
  </tr>
</section>

一般に、これが非常に貧弱な形式であることは理解していますが、メール クライアント (特に Gmail) がメールの CSS3 フォーマットをサポートするまでは、表を使用して HTML メール (ニュースレターなど) をフォーマットする以外に選択肢はほとんどありません。しかし、私自身のセマンティックな安心のために、< section >、< article >、および < header > タイプの要素を使用して物事を整理したいと考えています。

4

3 に答える 3

1

気になるセマンティクスであれば、既存の要素に対して定義されたARIA ロールを使用できます。<section><article>

<table id="posts" aria-role="region">
    <tr id="posts-title-row">
        <td id="posts-title" aria-role="banner">
            <h2>Latest Posts</h2>
        </td>
    </tr>
    <tr id="posts-row">
        <td aria-role="article">
            <p>
                Maecenas faucibus mollis interdum.
            </p>
        </td>
        <td aria-role="article">
            <p>
                Maecenas faucibus mollis interdum.
            </p>
        </td>
        <td aria-role="article">
            <p>
                Maecenas faucibus mollis interdum.
            </p>
        </td>
    </tr>
</table>
于 2013-04-11T16:24:30.317 に答える