このページの本文へ

XHTML1.0とHTML5の違いをスタバのページで紹介 (5/6)

2011年08月24日 10時01分更新

文●浜 俊太朗/ライブドア

  • この記事をはてなブックマークに追加
本文印刷

セクション関連要素以外の変更点

 続いて、セクション関連要素以外の変更点を見ていきましょう。

img要素のalt属性

 フッターの右下にあるQRコード画像のalt属性値を元の「QRコード」から、「携帯電話でこちらのURLにアクセスしてください。」に変更してあります。


<p class="qr"><img src="coffee_files/footer-mobile-qr.gif" alt="携帯電話でこちらのURLにアクセスしてください。" height="55" width="55" /></p>
<p class="url">www.starbucks.co.jp</p>

 HTML5の仕様書では、img要素のalt属性の要件が詳しく記述されており、画像が表示されない場合でも意味が正しく伝わるようにマークアップする必要があります。仕様書には、「電話でその文脈を説明するとしたら、どうすれば伝わりやすいか?」と考えるとよいとされています。

 スターバックスのサイトは、携帯電話でアクセスすると自動的に携帯電話用サイトが表示されるようになっているので、QRコードの代わりにURLを入力するよう伝える内容に変更しました。

コピーライト


<p class="copyright"><small>&#169;2011 Starbucks Coffee Company. All Rights Reserved.</small></p>

 HTML5では、コピーライトをsmall要素でマークアップします。XHTML 1.0などでのsmall要素は、テキストを小さく表示する要素でしたが、HTML5では大きく意味が変わり、著作権表記や注釈を表すようになりました。

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています