HTML 5.2の新機能・削除された機能、変更された記述ルールのまとめ
Post on:2018年1月16日
sponsors
HTML 5.2は2017年12月14日に勧告（Recommendation）され、仕様がRECステージに達しました。これはW3Cメンバーとディレクターの正式な承認を受けたことを意味し、Web制作者として、新しい機能の実装を開始するのに最適な時期になります。
HTML 5.2ではいくつかの新機能と削除された機能があり、記述ルールもいくつか変更され、今までinvalidだったものがvalidになり、新しくinvalidになったものもあります。
すべての変更点はHTML 5.2: Changesで確認することができます。
Web制作に最も影響を与えると思われるいくつかの変更点について説明します。
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
HTML 5.2の新機能
ネイティブの<dialog>要素
HTML 5.2のすべての変更の中で、私はネイティブのダイアログボックスである<dialog>要素が追加されたことに最も興奮しています。ダイアログボックスはWeb上でよく見かけますが、その実装方法は何通りもありました。ほとんどの実装はWebを視覚的にナビゲートしないユーザーにとっては実質的にダイアログボックスを使用できず、アクセシブルに実装するのは困難でした。
この新しい<dialog>要素はこの問題を解消し、実装方法を迷うことなくダイアログボックスを利用できるようにするものです。基本的な使い方を見てみましょう。
ダイアログボックスは、<dialog>要素を使用して作成されます。
|
1 2 3 4 |
<dialog> <h2>ダイアログのタイトル</h2> <p>ダイアログのコンテンツ</p> </dialog> |
open属性が適用されていない限り、ダイアログはデフォルトで非表示です。
|
1 |
<dialog open> |
このopen属性は、HTMLDialogElementでも使用可能なshow()とclose()のメソッドを呼び出すことで切り替えることができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<button id="open">ダイアログを開く</button> <button id="close">ダイアログを閉じる</button> <dialog id="dialog"> <h2>ダイアログのタイトル</h2> <p>ダイアログのコンテンツ</p> </dialog> <script> const dialog = document.getElementById("dialog"); document.getElementById("open").addEventListener("click", () => { dialog.show(); }); document.getElementById("close").addEventListener("click", () => { dialog.close(); }); </script> |
<dialog>要素は既にChromeでサポートされており、Firefoxはフラッグ（サポートされていないけれど、使用可能）の状態です。
<dialog>要素の実装は、下記のようになります。
See the Pen HTML 5.2 dialog element by Simon Evans (@SimonEvans) on CodePen.
iframeからのPayment Request APIの使用
Payment Request APIとは、チェックアウトフォームのネイティブの代替手段です。これは、各Webサイトの個別のチェックアウトフォームではなく、ブラウザに支払い情報を取り込む処理を移すことにより、ユーザーのためにWeb上で支払いを行う標準化された、そして一貫した方法を提供することを目的としています。
HTML 5.2より前では、ドキュメントに埋め込まれたiframeからこれらの支払いをリクエストすることはできませんでした。これは支払いのインタフェースが通常iframe内で処理されるため、サードパーティの支払い方法（Stripe、Paystackなど）ではこのAPIを利用することは本質的に不可能でした。
HTML 5.2ではiframeにallowpaymentrequest属性を記述すると、ユーザーがホスティングWebページにいる間にPayment Request APIを使用できるようになります。
|
1 |
<iframe allowpaymentrequest> |
Appleアイコンのサイズ
Webページのアイコンを定義するには、ドキュメントの先頭に<link rel = "icon">要素を使用します。異なるサイズのアイコンを定義するには、sizes属性を使用します。
|
1 2 |
<link rel="icon" sizes="16x16" href="path/to/icon16.png"> <link rel="icon" sizes="32x32" href="path/to/icon32.png"> |
この属性を使うアドバイスは、複数のサイズが利用可能な場合、特にほとんどのデバイスで独自の異なる「最適な」アイコンサイズがあるため、使用するエージェントのアイコンのサイズを決定することができます。
HTML 5.2より前ではlinkがアイコンの場合のみ、sizes属性が有効でした。しかし、AppleのiOSデバイスはsizes属性をサポートしていません。これを回避するために、Appleはデバイス固有のappple-touch-iconを導入しました。このアイコンは、デバイスで使用されるアイコンを定義するために使用できます。
HTML 5.2では、linkがapple-touch-icon（アイコンのみではない）の場合、この仕様でsizes属性を使用できるようになりました。これにより、異なるAppleのデバイスに異なるサイズのアイコンを提供することができます。
私が現在知る限り、Appleのデバイスは依然としてsizes属性をサポートしていません。しかし、この仕様は将来的に必ず役立ちます。
HTML 5.2でvalidになった記述ルール
新機能に加えて、HTML 5.2より前はinvalid（無効）だったいくつかの記述が、valid（有効）になりました。
複数の<main>要素
<main>要素は、Webページのメインとなるコンテンツを表します。headerやsectionやその他の要素はページ内に繰り返し配置できますが、<main>要素は特別で、ページ内の固有コンテンツに限られています。したがって、HTML 5.2より前では、<main>要素はページ内のDOMに唯一である必要がありました。
しかし、シングルページのアプリが普及したことにより、このルールに固執することは難しくなりました。DOMに複数の<main>要素が存在するけれど、常に1つの要素のみをユーザーに表示させる場合があるかもしれません。
HTML 5.2では、マークアップに複数の<main>要素を持つことができるようになりました。表示させない余分な<main>要素には、hidden属性で非表示にする必要があります。
|
1 2 3 |
<main>...</main> <main hidden>...</main> <main hidden>...</main> |
既に知っている思いますが、CSSで要素を隠す方法はいくつかあります。しかし、この場合は余分な<main>要素はhidden属性を使用して隠さなくてはなりません。ちなみに、CSSで要素を隠す方法には「display: none;」「visibility: hidden;」がありますが、これらはvalidではありません。
<body>内のスタイル
通常、<style>要素を使用して定義されたインラインCSSは、HTMLドキュメントの<head>内に配置されます。コンポーネント化された制作の増加に伴い、Web制作者は関連するhtml要素とともにスタイルを記述し配置する利点を見てきました。
HTML 5.2では、<body>内の任意の場所にインライン<style>ブロックを定義することがvalidになりました。これは使用する場所の近いところにスタイルを記述できることを意味します。
|
1 2 3 4 5 6 7 |
<body> <p>I’m cornflowerblue!</p> <style> p { color: cornflowerblue; } </style> <p>I’m cornflowerblue!</p> </body> |
しかし、パフォーマンス上の理由で、<head>にスタイルを記述することを推奨します。そのことは仕様にも一致します。
style要素はドキュメントの先頭に記述することが望ましい。ドキュメントのbodyにstyle要素を記述すると、スタイルの変更、レイアウトのトリガー、再描画が発生することがあるため、注意して使用する必要があります。
この例に示されるように、スタイルはスコープされていないことにも注意してください。HTMLドキュメントの後で定義されるインラインのスタイルは、その前に定義された要素にも適用されます。そのため、再描画がトリガーされることがあるのがその理由です。
<legend>内の見出し
フォームでは、<legend>要素は<fieldset>内のフォームフィールドのキャプションを表します。HTML 5.2より前では、legendの内容はプレーンテキストでなければなりませんでした。しかし、今では見出し要素を含めることができます。
|
1 2 3 4 5 6 7 8 |
<fieldset> <legend><h2>Basic Information</h2></legend> <!-- Form fields for basic information --> </fieldset> <fieldset> <legend><h2>Contact Information</h2></legend> <!-- Form fields for contact information --> </fieldset> |
fieldset要素を使用してフォームの異なるセクションをグループ化する場合には、これは本当に便利です。このような場合、見出し要素を使用するのが理にかなっています。これにより、ドキュメントのアウトラインに頼っているユーザーがフォームのセクションをより簡単に操作できるようになります。
HTML 5.2で削除された機能
HTML 5.2では、いくつかの要素が削除されました。
-
- keygen
- フォームの一部として公開鍵を送信するための要素です。
-
- menuとmenuitem
- ナビゲーションやコンテキストメニューを作成する要素です。
HTML 5.2で新しくinvalidになった記述ルール
最後に、いくつかの記述ルールがinvalid（無効）になりました。
<p>の子要素はインラインもフロートもinvalid
HTML 5.2では、<p>要素の唯一の有効な子要素はフレーズコンテンツでなければなりません。つまり、下記のタイプの要素はパラグラフ内にネストされなくなります。
- インラインブロック
- インラインテーブル
- floatやpositionで配置されたブロック
strict doctypeはinvalid
最後に、以下の構造はもはや有効なHTMLではありません。
- HTML 4またはXHTML 1で、strict doctypeを持つコンテンツ。
これにより、HTML 4とXHTMLのStrictに対して別れを告げることができます。
|
1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
sponsors
