コーポレートサイトのお知らせのマークアップ
こんにちは、中尾です。
近所にカルディコーヒーができました。輸入物の食料品やお菓子はラベルを見るだけでも楽しいものですね。なによりLoacker社のウェハースが気軽に購入できることが、嬉しいです。
さて、本日は「コーポレートサイトのお知らせのマークアップ」についてです。お知らせ、更新情報、ニュースリリースなどコーポレートサイトに必ずといっていいほど掲載される情報は果たしてどのように実装されているのか？エリア単位でのニッチな情報を個人的興味から調べてみました。
弊社の東証一部上場企業1685社の webサイト全体統計調査ほど細かい調査ではありませんが、正解の無いマークアップから制作者の意図を読み取っていただければおもしろいかと思います。
なお、調査サイトは企業サイトランキング 2009よりベスト20を選出しました。
表の見方
- 見出し・・見出しのラベリング
- 親・・・お知らせを括っているブロック要素
- 日付・・・お知らせの日付を括っているHTMLタグ
- 内容・・・お知らせの内容を括っているHTMLタグ
| 会社名 | 見出し | 親 | 日付 | 内容 |
|---|---|---|---|---|
| 富士通 | 「富士通からのお知らせ」 | ul li | p | p |
| 佐川急便 | 「ニュースリリース」 | dl | dt | dd |
| 日本郵政 | 「プレスリリース・お知らせ」 | table | th | td |
| JR東海（東海旅客鉄道） | 「ニュースリリース」「更新情報」 | dl | dt | dd |
| KDDI | 「ニュースリリース」 | table | th | td ul li |
| パナソニック | 「プレスリリース」 | dl | dt | dd |
| 郵便事業 | 「おしらせ」 | dl | dd | インライン |
| NTTドコモ | 「ドコモからのお知らせ」「新着情報」 | ul li | span | div |
| ゆうちょ銀行 | 「お知らせ」 | div | p | h3 |
| JAL | 「JALからのお知らせ」 | table | th | td |
| 富士フイルム | 「お知らせ」「ニュースリリース」 | dl | dt | dd |
| JR西日本（西日本旅客鉄道） | 「プレスリリース」 | dl | dt | dd |
| みずほフィナンシャルグループ | 「ニュースリリース」 | ul li | span | span |
| NEC（日本電気） | 「プレスリリース」「重要なお知らせ」 | dl | dt | dd |
| キリンビール | 「新着情報」 | dl | dt | dd |
| みずほコーポレート銀行 | 「みずほコーポレート銀行の最新情報」 | ul li | span | span |
| 富士フイルムホールディングス | 「JALからのお知らせ」 | table | th | td |
| アフラック（アメリカンファミリー生命保険会社） | 「ニュースリリース」 | dl | dt | dd |
| 大塚商会 | 「ニュース・お知らせ」 | dl | dt | dd |
| みずほ銀行 |
「お知らせ」 | ul li | span | span |
やはり定義リスト（DL）が多いですね。表組み（TABLE）も根強い人気がありました。一刻は忌み嫌われていたTABLEタグですが、表組みでは当然使用するタグではありますし、「お知らせ表」という考えて使用しているならば間違いは無いのでないかとも思います。
私自身は下記のように定義リストを使用して「お知らせ」を意味付けすることが多いです。
<hx>お知らせ</hx>
<p class=”archive”><a href=”link_to_archive.html”>一覧を見る</a></p>
<dl>
<dt>2010年3月30日</dt>
<dd><a href=”link_to_article.html”>auのスマートフォン「IS01」「IS02」の発売について</a></dd>
</dl>