HTML 5.2 Recommendation

## ごあいさつ
初めましての方も、お久しぶりの方も、こんにちは。
[なのくろ](https://twitter.com/nanocloudx)ですん。フロントエンドエンジニアです。先月までドワンゴでお世話になりました。

この記事は「[第二のドワンゴAdventCalendar2017](https://qiita.com/advent-calendar/2017/dwango2)」の21日目です。
今年のQiitaアドベントカレンダーもドワンゴ枠が最速で埋まっていて素晴らしいですね。
ドワンゴはとても素敵な会社なので、興味のある方は[こちら](http://dwango.co.jp/recruit/)も御覧ください！

## HTML5の標準化

![html5.png](https://qiita-image-store.s3.amazonaws.com/0/40021/51faa3e4-b897-5187-0c89-7c714d412763.png)

Qiita読者の皆様に於かれましては、恐らくHTML5の説明は必要ないと思うので割愛します。
少なくともWeb開発に携わる方であれば頻繁に読み書きするであろうマークアップ言語ですが、そのHTML5の最新の仕様を常に追っているという方はあまり多くはないかなと思っています。
(こんな記事を書いておきながら、私自身詳しく知りません...)

HTML5の標準化はW3Cという団体が行っていて、2008年に草案が発表、2014年に勧告がなされました。
(標準化については後述するWHATWGという団体も絡んできますが、本題ではないので割愛します。)
それ以降も仕様のマイナーアップデートは行われており、つい先日の2017年12月14日にHTML5.2が勧告されました。

本記事ではHTML5.2での変更点について紹介してみようと思います。
付け焼き刃の知識で書いたので、嘘書いてたらごめんなさい🙇
マサカリは大歓迎ですので、修正PRお待ちしております...!

W3Cに変更点を纏めたページがありますので、こちらを順番に見ていきます。
https://www.w3.org/TR/html52/changes.html

## New features

### dialog要素の追加

> The dialog element.

`<dialog>` 要素が増えました。
名前の通りダイアログであることを示すタグのようですね。
JavaScriptから操作でき、`HTMLDialogElement`には`show()`,`close()`,`showModal()`みたいなメソッドがあるみたいです。
モーダル表示はありがちなUIなので、各ブラウザの実装が待ち遠しいです。

### JavaScriptモジュールの統合

> Integration with the JavaScript module system of [ECMA-262].

`<scripts>`要素の`type`属性に`module`を指定すると、JavaScriptのモジュールとして扱えるようになるみたいですね。
Webpack や Browserify(最近だとparcelとか)でバンドルしなくてもいい世界はまだ先かなー。

### Referrerポリシーの追加

> Referrer policy [REFERRERPOLICY].

リファラーを送るかどうかのポリシーを指定できるようになりました。
対応するのは`<a>`,`<area>`,`<iframe>`,`<img>`,`<link>`の各要素です。
指定できるのは以下の通り。

```
enum ReferrerPolicy {
  "",
  "no-referrer",
  "no-referrer-when-downgrade",
  "same-origin",
  "origin",
  "strict-origin",
  "origin-when-cross-origin",
  "strict-origin-when-cross-origin",
  "unsafe-url"
};
```
それぞれ origin が同じ場合と異なる場合で、referrer を送る、送らない、一部送るみたいな違いがあるようです。

### WAI-ARIA1.1への対応

> Update ARIA reference to [wai-aria-1.1], which introduces new features to improve accessibility.

WAI-ARIA(ウェイアリア)はアクセシビリティを良くするための属性仕様です。
`aria-*`属性はかなり種類があるので把握しきれていませんが、例えばブラウザの音声読み上げ機能などに対して効果があるようですので、少しずつでも対応していけると良い気がします。

### link要素 / nonce属性の追加

> The nonce attribute for link as used in Content Security Policy [CSP3].

`<link>`要素に`nonce`属性が追加されたみたいです。
これはコンテンツセキュリティーポリシーに関する属性で、既に`<script>`要素にはHTML5.1で追加されているものです。
`nonce`属性を指定すると、リソース取得時のレスポンスヘッダーに含まれる`nonce-***`みたいな文字列と一致していない場合、読み込まれたスクリプトの実行を防ぐことができるらしいです。

### iframe要素 / allowpaymentrequest属性の追加

> The allowpaymentrequest attribute of iframe, for integration with the Payment Request API  [PAYMENT-REQUEST].

`iframe`要素に`allowpaymentrequest`属性が追加されたみたいです。
確かブラウザの共通UIで支払フローを実現できる(自分で決済フォームとか作らなくていい)PaymentRequestAPIっていうのがあって、この属性は`iframe`要素内部でこのAPIを呼び出していいか指定するための属性みたいです。
`sandbox`属性の属性値にしなかったのは何故なんでしょう？(そこまでは調べてない)

### iframe要素 / sandbox属性にallow-presentation属性値を追加

> The allow-presentation value for the sandbox attribute of iframe, for integration with the Presentation API  [PRESENTATION-API].

`iframe`要素の`sandbox`属性に`allow-presentation`という属性値が追加されたらしいです。
PresentationAPIはページを別のスクリーンに表示して操作したりするためのAPI(知らなかった)で、それらの機能を`iframe`内部で許可するか選択できるようになったということみたいです。

### link要素 / rel属性にcanonical属性値を追加

> The canonical value for the rel attribute of links.

SEOあたりで度々登場するcanonical指定のことだと思います。
異なるURLが同一のコンテンツを指している場合に、検索ロボットに適切なインデックスを伝えることができます。

### link要素 / rel属性にnoreferrer属性値を追加

> The noreferrer link type value for [SECURE-CONTEXTS].

link要素でもリファラーを送るかどうか選択できるようになったということだと思います。

### link要素 / rel属性にapple-touch-icon属性値を追加

> The apple-touch-icon value for the rel attribute to allow the use of the size attribute in the link element.

WebClip(スマートフォンのホーム画面にWebサイトのショートカット置けるやつ)のアイコンのサイズ指定に使うんだと思います。
`apple-touch-icon`ってことはiPhoneの為の値な気がしますけど、普通に標準化されるんですね。

### navigatorオブジェクトにメソッドを追加

> The registerContentHandler(), isContentHandlerRegistered() and isProtocolHandlerRegistered() methods.

`window.navigator`オブジェクトに以下の各メソッドが追加されたみたいです。

- `registerContentHandler(protocol, uri, title)`
- `isContentHandlerRegistered()`
- `isProtocolHandlerRegistered()`

`registerContentHandler()`はプロトコルとURLを紐付けるためのメソッドらしく、第一引数で指定したプロトコルのリンクを選択したときに、第二引数で指定したURLが開くのだそう。
第二引数の文字列には`%s`というプレースホルダーを指定可能で、押されたリンクのURLに置き換えできるみたいです。

### HTMLElement に innerTextを追加

> The innerText IDL attribute for HTMLElement.

`HTMLElement.innerText` でDOM要素の中身がテキストで取得できるようになりました。
似たやつに`textContent`がいます。どちらもテキストを返しますが、`innerText`はブラウザでレンダリングされた状態に近い形で(つまりCSSでスタイルが適応された状態に寄せて)テキストが出力される点において大きく異なります。

### about URLスキーマに html-kind を追加

> Define the about:html-kind URL for MP4 media track integration.

特別な状態を表す`about:`URLスキーマに仲間が増えたんだと思います。
空白のページである状態を表す`about:blank`はたまに使いますよね。
`about:html-kind`はメディアトラックの識別子として使用されるとのこと。
(ググってもいまいち使用例がなかった)

### コンテンツセキュリティポリシーの適用

> Integrate the Should element be blocked a priori by Content Security Policy? of [CSP3]

ごめんなさい、あまりちゃんと理解できませんでした🙇
インラインで読み込まれたスクリプトをセキュリティ的にブロックするみたいなことを言っている・・・？
https://w3c.github.io/webappsec-csp/#should-block-inline

Googleのコンテンツセキュリティーポリシーについて書かれたドキュメント読むことにします。
https://developers.google.com/web/fundamentals/security/csp/

## Features removed

### keygen, menu, menuitem 要素の廃止

> The keygen, menu and menuitem elements.

`<keygen>`,`<menu>`,`<menuitem>`の各要素がHTML5.2では廃止されたようです。
人気なかったんでしょうかね？主観ですが確かにあまり見た記憶がないです。

### input要素 / inputmode, dropzone 属性の廃止

> The inputmode attribute for textual input elements, and the dropzone attributes.

input要素にはそんな属性があったんですね(廃止されたものを覚えても仕方ない)。

### showModalDialog の廃止

> The showModalDialog method.

windowオブジェクトから`showModalDialog`が廃止されました。
そんなのもあったんですね（以下略

### Plugin API の廃止

> The Plugin API has been marked as obsolete.

さらばFlash...（以下略

## HTML Living Standard
W3Cとは別にWHATWGという団体もHTML5の仕様策定を行っています。
こちらは「HTML Living Standard」と呼ばれており、内容は頻繁に更新されている様子です。
WHATWGの策定やブラウザの実装が先行し、追ってW3Cの標準化がなされていくようなので、最新の動向を知るには Living Standard にアンテナを張っておくのが良さそうです。
またHTML5.2勧告と同時に、HTML5.3草案も公開されていますので、合わせて確認すると良いかもしれません。

## 良いお年を！
あと数日で2017年が終わってしまう・・・だと・・・！？
今年のWebフロントエンドも覚えることが多かった気がしますが、まだまだ知らないことは沢山ありそうです。
来年もゆるふわに頑張りましょう、皆様良いお年を（ ＾ω＾）