第6回MLCマークアップ部 開催レポート | フロントエンドBlog | ミツエーリンクス
リンク先、CグループとDグループのマークアップは妥当なHTML5ではありません。次の1行目のようなマークアップは誤りですが、2行目または3行目は妥当なHTML5です。
<time class="date">2015.XX.XX</time> <!-- リンク先オリジナル（不正） --> <span class="date">2015.XX.XX</span> <!-- span要素ならもちろん妥当 --> <time>2015-06-16</time><!-- DOMでいうtime要素のtextContentを妥当な機械可読形式にすれば妥当 -->
もし持つ場合、time要素の日付時刻値は要素のdatetimeコンテンツ属性値であり、そうでない場合、要素のtextContentである。
4.5.11 time要素 — HTML5 日本語訳
time要素の日付時刻値は以下の構文のいずれかと一致しなければならない。
妥当な日付時刻値というのは、
- 妥当な月文字列
- 妥当な日付文字列
- 妥当な年のない日付文字列
- 妥当な時刻文字列
- 妥当な浮動日付および時刻文字列
- 妥当なタイムゾーンオフセット文字列
- 妥当なグローバル日付および時刻文字列
- 4つ以上のASCII数字で、少なくとも1つは"0"（U+0030）でない。
- 妥当な期間文字列
というふうになっておりまして、私も覚え切れていません。だいたい、
<time>Z</time><!-- 妥当なタイムゾーンオフセット文字列（！） -->
誰がこんなの使うのか。これ考えたの本当に誰なのか。もはやISO 8601形式でも何でもない、そもそもHTML5のそれはISOと互換性がないものになったのいつからだったのか……。time要素をマスターできたら立派なHTMLマークアップ使いになれるのではないでしょうか（適当）。
で、人のマークアップにケチを付けるだけというのもなんですので、私もマークアップを晒してみることにします。
今回<dl>か<ul>かで悩んだグループが多く、<table>要素が議題に挙がったグループが少なかったのが印象的でした。
第6回MLCマークアップ部 開催レポート | フロントエンドBlog | ミツエーリンクス
お題を見た瞬間に、どうせみんなリストで組むんだからテーブルで組もうと思った私は多分ひねくれものなわけですが、こういうのはどうでしょうか……。
<table role="presentation" id="mod_news"> <tbody> <tr> <td>2015.XX.XX</td> <td><span>お知らせ</span></td> <td><a href="#">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</a></td> </tr> <tr> <td>2015.XX.XX</td> <td><span>その他</span></td> <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td> </tr> <tr class="border_skip"> <td>2015.XX.XX</td> <td><span>IR情報</span></td> <td><a href="#">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</a></td> </tr> <tr> <td aria-hidden="true"></td> <td><span>製品情報</span></td> <td><a href="#">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</a></td> </tr> </tbody> </table>
おまえはWAI-ARIAを使いたかっただけちゃうんかと。そして、どう考えても裏でスクリプトを咬ませて吐き出させるにはめんどっちいマークアップになってしまったわけですが。
できるだけclassを噛ませたくなかったからこういう風にしてみたのですが、それでもどうしてもボーダーを抑止するのにclass="border_skip"とでもして
#mod_news tr:not([class]) td {border-bottom:2px dotted grey;}
くらいしか思い付かなかったわけですがまあ、ダサイと言われれば返す言葉はないですね…orz
Re: 第6回MLCマークアップ部 開催レポート | 富永日記帳にさらに検討されたHTML断片の例が記載されていますのであわせてどうぞ。
