2016/11/1付けで正式勧告となったHTML5.1新仕様について、知っておくべきことと知ってたら楽しいこと、そして知らなくてもいい（であろう）こと

追記[20161109]

• todogzmさんによる脱字のご指摘の反映
• narutoさんによる translatable の誤訳のご指摘の修正

追記[20161110]

• iwaim@githubさんによる旧仕様へのコメントを反映

追記[20161111]

• momdoさん、falsandtruさんによる誤訳のご指摘の修正

追記[20161124]

• takahashimさんによる脱字のご指摘の反映

公式はこちら。

以下に解説する**「知っておくべき」「知ってたら楽しい」「知らなくてもいい」**の分類は私個人の見解であることをご容赦願いたい。また、解釈の誤りやその他ご意見などはコメント欄にてご鞭撻賜りたい。

知っておくべきこと

多くのマークアップ業務で活かせられるであろうことをここに記述する。

<picture>とsrcset属性によるレスポンシブイメージの正式採用

詳しくは srcset属性について などを記事を参照されたい。

「<h1>に紐づく」 というのは、原文の an h1 to create an outline の拙訳である。

<tbody>の前に<tfoot>を書くことの禁止

スタイルガイドがしっかり整っているようなプロダクトで逆に*「<tfoot>で定義しているデザインをテーブルの最初に持ってきたい」*というケースが発生し、書いてしまうこともある。（じっさい、私は書いたことがある ）

また、かつて <tfoot>は、<tbody>のレンダリングを待たずに先にユーザに見せるべきである という理由から、<thead> -> <tfoot> -> <tbody> の順番で記述することが正式な仕様として定められていたことがあった。

しかし、そもそもレンダリングに時間がかかるような膨大な<tbody>はJavaScriptフレームワークなどを使って描画するような時代に、<tfoot>の内容もフロントエンドでの演算結果をレンダリングするのは当然であり、そういう意味ではこの仕様変更は確かに有意である。

<header>と<footer>を、<section>内でネストできるように

<header>と<footer>は、すでにHTML5の時点からいろいろなところに記述できるようになっていたが、さらにネストできるとは。「header」と聞いたらページの一番上にあるナビゲーションバーのことを指すと思いがちなので、少し考えてみたいところではある。

空の<option>要素が許容されるように

むしろいままでダメだったんだろうか。<option value=""></option>を<select>の最初に記述する文化による後追いの規則だろうか？

<figcaption>は<figure>の中ならどこにでも書いていいことに

<img>の次に書かなければいけないということは一切ない。ちなみに、これはもともとだがfigcaption自体もオプションである。詳しくは figureについて（やや堅苦しく）考える などを参照されたい。

<menuitem type="context"> でブラウザコンテキストメニューのマークアップが可能に

そもそも<menu>や<menuitem>をみんなどれくらい使っているのだろうか。ウェブアプリケーションの**「インタラクティブメニュー」**を開発する際、ちょっと思い出して使ってみるのも一興かもしれない。

<img>にwidth="0"を書いてもよいことに

今までダメだったらしい。なお、個人的にはwidth``height属性は嫌いで、CSSで調整する派なのでまったく影響がない。

<input type="range">のmultiple属性の廃止

multipleをつけることで、ひとつのタグで２つのスライダーを表現することができたが、最初からタグを２つ記述すればよいということに気づいたのだろうか。

知ってたら楽しいこと

知ってたら「そうなんだ」と思えるが、多くの開発者の仕事にはほとんど影響がないであろうことをここに記述する。

<detail>と<summary>でユーザーにコンテンツの概要をセマンティックに伝えられるようになった

どれほど浸透するか見ものである。

<h1>配下の<section>への<h1>のネストの廃止

すなわち、以下のようなHTML構造の禁止ということだろう。

<h1>headline</h1>
<section>
  <h1>this is the inner headline.</h1>
</section>

<label>へのform属性の廃止

<label form>などとは書いたことがないので、どれくらいの人が困るのか知っていたら教えてほしい。

<input type="submit">のvalue属性の値のデフォルト値が翻訳可能属性に

Google翻訳等の自動翻訳によるローカライズの際、翻訳したくない値には translate=yes translate=no とすることで翻訳可否を明示できるのだが、<input type="submit">のvalue属性に対するデフォルトの値（何も明示しない場合）がyesになった、ということのようだ。

mousewheelイベントはwheelという名前に

かといってすぐ動かなくなるということはないだろうから、急いで直す必要はないかもしれない。

SVGファイルの最初に記述される<title>が、そのSVGのタイトルと認識される

いままでは最後に記述されるものだったらしいが、SVGファイルのコードを直接編集する人はまれだろう。

.tFootと.createTFoot()では、常に<table>最後尾にDOMが挿入されるように

そもそも.createTFoot()するケースの実例があったら見てみたい。

<area>タグのhreflang属性、andtype属性の廃止

残念ながら私の周りには<area>タグを積極的に使う人はいないし、自身もその機会に出会ったことがない。

知らなくてもいい（であろう）こと

ここで紹介したものはHTML5.1正式勧告の内容の半分にも満たない。

他には、たとえば history.scrollRestoration でどこからどうページにたどり着いたかを保持できるように なったとか、requestAnimationFrame APIによるアニメーションの正式採用 であるとか、<script nonce>``<style nonce>Content Security Policy（HTTPSリクエスト）を明示的に扱えるように なったとかいろいろあるが、残念ながらほとんどの人にとっては知っていても活用する機会に巡り合えなそうなものたちである気がするので割愛する。

その他の詳細は 公式 を参照されたい。