|
|---|
この連載が本になりました！
「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-*などもグローバル属性です。
a要素
- カテゴリー：フローコンテンツ、フレージングコンテンツ（内容がフレージングコンテンツのみの場合）、インタラクティブコンテンツ、パルパブルコンテンツ
- この要素が使える文脈：内容がフレージングコンテンツの場合はフレージングコンテンツが予想される場所、それ以外の場合はフローコンテンツが予想される場所
- コンテンツモデル：トランスペアレントだが、インタラクティブコンテンツは入れられない
- コンテンツ属性：グローバル属性、href、target、rel、media、hreflang、type
a要素のもっとも大きな変更点は、ブロックごと囲めるようになった点でしょう。a要素はHTML 4.01ではインライン要素として定義されていたため、div要素などのブロック要素を囲むことはできませんでした。HTML5では以下のような使い方もできます。
<a href="/sample/">
<section>
<h3>今日のランチ</h3>
<p>今日のランチは有名なピッツェリアに行ってきました！...</p>
<section>
</a>
ただし、「XHTML1.0やHTML4.01でブロック要素と呼ばれていた要素なら何でも囲める」というわけではありません。例えば、ul要素の直接の子要素にできるのは「0個以上のli要素」とされているため、li要素をa要素で囲むことはできません。この場合は、従来通り、li要素の中にa要素を入れることになります。
■誤った例
<ul>
<a href="/home/"><li>Home</li></a>
<a href="/about/"><li>About</li></a>
<a href="/blog/"><li>Blog</li></a>
</ul>
a要素のコンテンツモデルはトランスペアレントなので、親要素のコンテンツモデルが継承されますが、インタラクティブコンテンツを入れることはできません。
ほかにも変更点があります。href属性の記述が無いa要素は、「リンクになる可能性があるプレースホルダー」を表すようになりました。下のソースコードはナビゲーションを意図したもので、現在のページはAboutページです。Homeページでは、Aboutの部分はリンクになり、Homeの部分がプレースホルダーとなります。
<ul>
<li><a href="/home/">Home</a></li>
<li><a>About</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>
なお、href属性を記述しない場合は、以下の属性も省略する必要があります。
target, rel, media, hreflang, type
download属性
WHATWG版の仕様書に追加された属性に、download属性とping属性があります。download属性が指定されたa要素は、「リソースをダウンロードするためのリンク」という特別な意味になり、値としてデフォルトの保存ファイル名を指定できます。値に制限はありませんが、ファイル名に使用できない文字が含まれる場合はブラウザーによって調整される可能性があります。
<p><a href="/sample.zip" download="html5-sample-file">サンプルファイルをダウンロード</a></p>
ping属性
ping属性が指定されたリンクをユーザーがたどると、サイト運営者などにそのことが通知されます。属性値には、通知先にしたいURLを指定します。
一般的に、ユーザートラッキングのためにリダイレクト処理を使うことがありますが、ping属性が実装されていればリダイレクトを挟まずにトラッキングできます。また、ブラウザーがping属性による通知を無効にする機能を実装していれば、プライバシーを気にするユーザーは通知の可否を選択できるようになります。
