|
|---|
この連載が本になりました！
「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き!
HTML5マークアップ 現場で使える最短攻略ガイド
定価：2,808円 （本体2,600円）／形態：B5変 (240ページ)
ISBN：978-4-04-866070-9
HTML5には、新たに加わった要素だけでなく、従来とは意味や使い方が変わった要素があります。引き続き、意味や、使い方に変更があったり、注意点が加わった要素を解説します。
各要素の解説冒頭に登場する「カテゴリー」と「コンテンツモデル」については、第5回を参照して復習してください。
HTML5のグローバル属性
以降の解説で登場する「グローバル属性」とは、すべての要素で使用できる属性のことを表します。HTML5のグローバル属性には、以下のものがあります。
accesskey class contenteditable contextmenu dir draggable dropzone hidden id inert itemid itemprop itemref itemscope itemtype lang spellcheck style tabindex title translate 独自データ属性（data-*）
また、本稿の域を出てしまうので詳細は割愛しますが、JavaScriptで使用するイベントハンドラー（onclickやonsubmitなど）や、WAI-ARIA（W3Cが定めたアクセシビリティ向上のための技術仕様）のroleとaria-*などもグローバル属性です。
img要素
- カテゴリー：フローコンテンツ、フレージングコンテンツ、エンベッディッドコンテンツ、インタラクティブコンテンツ（usemap属性がある場合）、パルパブルコンテンツ
- この要素が使える文脈：エンベッディッドコンテンツが予想される場所
- コンテンツモデル：空
- コンテンツ属性：グローバル属性、alt、src、crossorigin、usemap、ismap、width、height
img要素は、基本的な使い方は以前と変わりませんが、従来のPNGやGIF、JPEGといったビットマップ画像に加えて、SVGやPDF（単一ページのみ）などのベクター画像も指定できることが仕様書に明記されました。また、HTML5ではsrc属性とalt属性の組み合わせによって、画像の意味が以下のように変わるようになりました。
●src属性にもalt属性にも値がある場合
src属性にもalt属性にも値がある場合、画像はコンテンツの重要な部分であることを表します。alt属性の値は代替テキストとなります。
以下の例は、ロゴやナビゲーションや見出しなどでよく見るケースです。
<h1><a href="/"><img src="/img/logo.png" alt="海鮮料理専門店 浜旬" /></a></h1>●src属性に値があり、alt属性の値が無い場合
src属性に値があり、alt属性には値が無い場合、画像は装飾または補足であることを表します。具体的には、同じ意味を持つコンテンツが文書内に重複している場合などに発生します。
以下のソースコードは、TwitterやFacebookなどのSNSでよく見る、ユーザーアイコンの横にユーザーネームが並んだ状態を意図したものです。
<a href="/member/hamashun"><img src="/img/member-icon/hamashun.png" alt="" />hamashun</a>この場合、ユーザーアイコンの代替テキストにはユーザーネームを入れることになり、その後に続くテキストと内容が重複してしまいます。また、ユーザーアイコンはユーザーネームを補足する情報ですので、このケースではalt属性の値は空になるはずです。
●src属性に値があり、alt属性そのものが無い場合
src属性に値があり、alt属性の記述そのものが無い場合、画像はコンテンツの重要な部分である可能性を持ちますが、代替テキストはありません。alt属性の値が空なのではなく、そもそもalt属性自体が無い状態です。
<p>次の文字を入力してください。</p>
<p><img src="/img/captcha.png" title="CAPTCHA" /></p>
<p>画像を見れない場合は<a href="?audio">音声テスト</a>を利用することができます。</p>
<input type="text" name="captcha" />
HTML5では、alt属性の指定は必須ではありませんので、条件によっては指定を省けます。たとえば、スパム防止の目的で使われるCAPTCHでは、alt属性に内容を記述できませんが、かと言って装飾や補足のための画像でもありません。そのため、上のサンプルではalt属性の値を空にせず、属性そのものを指定していません。
alt属性を指定しないimg要素にについては、後で詳しく解説します。
●src属性に値が無く、alt属性に値がある場合
src属性に値が無く、alt属性に値がある場合、alt属性に指定されたテキストを表します。
<h2>ブログ記事ランキング</h2>
<ol>
<li><img src="" alt="1位" /></li>
<li><img src="" alt="2位" /></li>
<li><img src="" alt="3位" /></li>
.
.
.
</ol>このパターンが意図して記述されることは通常ないでしょう。JavaScriptでsrc属性を書き換えて画像を表示する実装などで、何らかの不具合が起きたときに発生すると考えられます。
●src属性に値が無く、alt属性に値が無いか、alt属性そのものが無い場合
src属性に値が無く、かつ、alt属性の値またはalt属性の記述そのものが無い場合は、何も表しません。
<img src="" alt="" />
