W3C 版 HTML 5.1 変更点まとめ

21
いいね
1
コメント

mijabi

2017年06月30日に更新

編集リクエスト1

W3C 版 HTML 5.1 変更点まとめ

HTML 勧告の全てを把握した上で、フロントエンド開発を行うことはなかなか難しく、
昨今のフロントエンド開発は、都度必要な処理が出てきた際にサポート状況等を調べて実装するような流れが順当なのかと思います。

今回、W3C 版 HTML 5.1 で追加・変更されたものをまとめたものの、
勧告された全てが、現段階で全てのブラウザーに実装されているわけでもなく、
こんなのが正式勧告されてるんだーと、頭に入れておけば良いのかと思います。

間違い、解釈の違いなどありましたらすみません。

W3C HTML 5.1 勧告
https://www.w3.org/TR/2016/REC-html51-20161101/index.html

大きな変更点
https://www.w3.org/TR/2016/REC-html51-20161101/changes.html

W3C HTML5 と W3C HTML 5.1 間の変更点
https://w3c.github.io/test-results/html51/implementation-report.html

と、このドキュメントをまとめた一方で、
WHATWG LS を推奨すべきだという見解・事実もあり、行末が見通しづらいのが現状です。
以下、状況がよく分かるリンク先を貼っておきます。
個人的には sectioning contents 毎の h1 にまつわる迷走は許しがたし…

WHATWG LS と HTML 5.1 の立ち位置
https://github.com/momdo/talk/blob/master/webtalk_2016-09-03.pdf

WHATWG LS と HTML 5.1 の差分
https://www.w3.org/TR/2015/WD-html51-20151008/introduction.html#landscape

最後の最後で W3C 側の状況が把握できない部分がいくつかありまして、最後の最後でやや手抜き感が出てきますがご了承ください。
若かりし頃は W3C の勧告にメシを食わしてもらっていた（？）頃もあり、勧告発令毎になんとなく一喜一憂もし、昨今ではオープンソース化が進み、HTML 5.1 のタイポを指摘したりしていたところ気軽な感じで Contributor に追加してくれたり、個人的には擁護派というか、自然すぎる当たり前の存在だったのですが、後半の WHATWG から不足箇所を持ってきているあたりや、WHATWG Living Standard の、『都度バージョンを割り振らず、一つの仕様を継続的に更新していく』という順当とも感ぜられる流れを諸々をもにょもにょすると…。
ブラウザ毎に独自の実装が進むような、各社の思惑が入り組んだ製作者泣かせの時代が再度到来しないように、各人が何かをすべきなのかもしれません。

# デバイスサイズによって画像を出し分けることができる `<picture>`、`<source>` 要素の srcset 属性が追加

from: changes.html#features-added

<picture>要素の子要素に<source>要素を配置し、srcset属性に画像をすることで、レスポンシブに対応した画像の表示が可能となります。

・Sample page：　picture.html

・Sample code：

<picture>
  <source media="(min-width: 640px)" srcset="unako_1024.jpg">
  <source media="(min-width: 320px)" srcset="unako_640.jpg">
  <img src="unako_240.jpg" alt="">
</picture>

srcset は、カンマで複数指定ができ、対応する devicePixelRatio によって表示する画像の出しわけも可能

<picture>
  <source media="(min-width: 640px)" srcset="unako_1024.jpg">
  <source media="(min-width: 320px)" srcset="unako_640.jpg,unako_640_2x.jpg 1.5x,unako_640_2x.jpg 2x">
  <img src="unako_240.jpg" alt="" srcset="unako_240_2x.jpg 1.5x,unako_240_2x.jpg 2x">
</picture>

・サポート状況：　developer.mozilla.org

# 見出しと中身をアコーディオン開閉形式で実装することができる `<details>`、`<summary>` 要素が追加

from: changes.html#features-added

<details> 要素と <summary> の組み合わせで、
ディスクロージャー付きの開閉式ウィジェットを実装することができる。

・Sample page：　details.html

・Sample code：

<details>
  <summary>詳しくはこちら</summary>
  <p>タップでこの詳細テキストをトグル表示。</p>
</details>

デフォルトで開いておく open 属性がある。

<details open>
  <summary>詳しくはこちら</summary>
  <p>タップでこの詳細テキストをトグル表示。デフォルトオープン。</p>
</details>

・サポート状況：　developer.mozilla.org

# <menuitem> タグと type="context" 属性の組み合わせで、ブラウザのコンテキストメニューに機能を追加可能に

from: changes.html#features-added

コンテキストメニューの表示自体は、html のみで実装が可能。
現時点（2017-06-08）では firefox のみ対応。

・Sample page：　menu.html

・Sample code：

<form name="npc" contextmenu="namemenu" action="#" method="get">
  <ul>
    <li>
      <label>Character id: <input name="char" type="text" required></label>
    </li>
    <li>
      <input type="submit" name="submit" value="submit">
    </li>
  </ul>
  <menu type="context" id="namemenu">
    <menuitem label="Pick random id" onclick="document.forms.npc.elements.char.value = getRandomName()">Pick random ID</menuitem>

  </menu>
</form>

<script>
  function getRandomName() {
    var text = '';
    var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    for(var i = 0; i < 10; i++) {
      text += possible.charAt(Math.floor(Math.random() * possible.length));
    }
    return text;
  }
</script>

# ブラウザの描画タイミングに合わせてコールバックしてくれる requestAnimationFrame API が追加

from: changes.html#features-added

window.requestAnimationFrame() メソッドを実行すると、ブラウザの描画タイミング毎にコールバックしてくれるので、ブラウザの描画タイミングは無視して時間で発火する setTimeout や、setInterval よりも低い負荷でアニメーション等を実行できる。

また、ブラウザのタブが非アクティブ状態では処理がストップする為、パフォーマンス面でもアドバンテージがあると言える。

・Sample page：　request-animation-frame.html

reference source: https://liginc.co.jp/web/js/130758

・Sample code：

<div id="hoge" class="hoge" style="width: 200px; height: 200px; position: absolute; left: 0; top: 400px; background: #333;">
  hoge
</div>

<script>
var d = document.getElementById('hoge');

var startTime = new Date().getTime();

(function loop(){
    window.requestAnimationFrame(loop);
    var currentTime = new Date().getTime();
    var status = (startTime - currentTime)/-1000;
    d.style.left = status + 'px';
})();
</script>

・サポート状況：　Can I Use

# リンク要素のためのrev属性が復活。主に RDFa の為

from: changes.html#features-added

rel がリンク先のページとの関係を示すのに対し、rev は、リンク先から見た自身のページの関係を示す。
過去 html4 で実装されていたが、html5 で一旦非推奨になっていた。

・Sample code：

<a rev="prev" rel="next" href="/searchresult/p/2/">次のページ</a>

上の例では、
href 属性値が検索結果の二ページ目を指している為、rel="next"。
一方で、
二ページ目から見ると、一ページ目である自ページは前のページということになるので、rev="prev"。

rev に指定できる値の一覧：　www.w3.org

・サポート状況：　???

# HTMLMediaElement インターフェースと、そのメディアのソースを設定する為の srcObject プロパティが追加

from: changes.html#features-added

video と audio の制御用属性と、
Web上で表示・再生するメディアのソース（MediaStream）を取得・設定するためのもの

・Sample page：　src-object.html

reference source: http://www.atmarkit.co.jp/ait/articles/1703/03/news037.html

・Sample code：

<p><video id="video" width="240" height="160" autoplay></video></p>

<script>
  var video = document.getElementById('video');

  navigator.getUserMedia =
    navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia;

  if (navigator.getUserMedia) {

    navigator.getUserMedia(
      {
        video: true,
        audio: false
      },
      function(stream) {
        video.srcObject = stream;
        console.log('srcObject: ' + video.srcObject);
      },
      function(err) {
        var d = document.createElement('span');
        d.innerHTML = 'Accept in-camera please.';
        video.parentNode.replaceChild(d, video);
        console.log("srcObject: " + video.srcObject);
      }
    )

  }
</script>

・サポート状況：　developer.mozilla.org

# `<track>` 要素と EventSource インターフェースが CORS に対応

from: changes.html#features-added

track 要素は、動画/音声ファイルに字幕やキャプション、スクリーンリーダーのテキスト、チャプターを追加できる要素。
字幕ファイルは vtt 形式。
異なるドメインから vtt ファイルを読み込むには、 video タグに crossorigin 属性を付与する。

・Sample page：　video.html

・Sample code：

// no crossorigin
<video width="320" height="240" src="intro_original_bw_build.m4v" controls autoplay>
  <track kind="captions" src="video.vtt">
  Your browser does not support the video tag.
</video>

// crossorigin
<video width="320" height="240" src="intro_original_bw_build.m4v" crossorigin controls autoplay>
  <track kind="captions" src="http://localhost/TEST/videotag/video.vtt">
  Your browser does not support the video tag.
</video>

＊ Access-Control-Allow-Origin を通す環境がないので完全にテストできておらず…

・サポート状況：　???

# `<canvas>` 要素の ImageBitmap インターフェースが別ドメインのコンテンツを扱えるように

from: changes.html#features-added

過去、別ドメインのコンテンツが扱えなかった際の挙動が調査できないが、現在では問題なくリクエストが通る。

・Sample page：　canvas.html

・Sample code：

<div>
  <canvas id="myCanvas" width="300" height="300"></canvas>
</div>

<script>
  var canvas2 = document.getElementById('myCanvas'),
  ctx = canvas2.getContext('2d'),
  image = new Image();
  image.onload = function() {
    Promise.all([
      createImageBitmap(this, 0, 0, 300, 300)
    ]).then(function(sprites) {
      ctx.drawImage(sprites[0], 0, 0, )
    });
  }
  image.src = 'http://pulp.photo/github/images.jpg';
</script>

・サポート状況：　???

# `<source>` 要素に error イベントが追加

from: changes.html#features-added

以前は video タグに対して error ハンドリングする仕様だったが、
複数 video ファイルを source タグで提供するのが一般的になった為、source タグそれぞれに対して error ハンドリングをするように修正

・Sample page：　video2.html

・Sample code：

<div>
  <p>video tag with invalid src path</p>
  <video controls style="width: 640px;" id="vvv">
    <source src="hoge.m4v"></source>
    <div id="fail_load_video">
      <a href="intro_original_bw_build.m4v">
        <img src="video-thumbnail.png" alt="download video"><br>
        failed to load video file, click image to download a file
      </a>
    </div>
  </video>
</div>

最後の source タグ（一つしか無いが）で指定している動画の読み込み時にエラーが起きた際、
video タグ自体を、div#fail_load_video タグの中身に置き換える処理。

<script>
  var v = document.getElementById('vvv');
  var sources = v.querySelectorAll('source');
  var lastsource = sources[sources.length-1];
  lastsource.addEventListener('error', function(ev) {
    var d = document.createElement('div');
    d.innerHTML = document.getElementById('fail_load_video').innerHTML;
    v.parentNode.replaceChild(d, v);
  }, false);
</script>

・サポート状況：　???

# `<track>` 要素に error イベント、load イベントが追加

from: changes.html#features-added

source タグと同様、字幕等表示用 vtt ファイル読み込み時に関しての error のハンドリングも標準化された。
画面右下、キャプションボタン押下でキャプションを on にした際、ファイルが読み込めなかった際のエラーハンドリング等が行える。

・Sample page：　video3.html

・Sample code：

<div>
  <p>video tag with invalid vtt path</p>
  <video controls style="width: 640px;" id="vvv">
    <source src="intro_original_bw_build.m4v"></source>
    <track kind="captions" src="hoge.vtt">
  </video>
</div>

<script>
  var v = document.getElementById('vvv');
  var sources = v.querySelectorAll('track');
  var lastsource = sources[sources.length-1];

  lastsource.addEventListener('error', function(ev) {
    alert('字幕用ファイルが正しく読み込めませんでした');
  }, false);
</script>

・サポート状況：　???

# Promise.reject 発火時や、reject 後の then → reject 発火のタイミングを追跡する thenable onrejectionhandled や onunhandledrejection が追加

from: changes.html#features-added

表題の通り。

・Sample page：　on_rejection_handled__on_unhandled_rejection.html

・Sample code：

window.addEventListener("unhandledrejection", function(e) {
  console.log('[unhandled-rejection] reason: ' + e.reason);
});

window.addEventListener("rejectionhandled", function(e) {
  console.log('[rejection-handled] reason: ' + e.reason);
});

var promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('エラー')
  }, 1000);
});

setTimeout(() => {
  promise.then(
    v => v,
    e => e
  )
}, 2000);

・サポート状況：　???

# `<table>` タグや、配下の各要素を制御できる HTMLTableCaptionElement、HTMLTableSectionElement、HTMLTableRowElement が追加

from: changes.html#features-added

表題の通り。

・Sample page：　table-element.html

・Sample code：

<table id="table">
  <thead id="thead">
    <tr>
      <th>th1</th><td>td1</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>td1</td><td>td2</td>
    </tr>  
  </tbody>
</table>

var sampletbl = document.getElementById("table");

// caption タグの追加
sampletbl.caption = sampletbl.createCaption(); // HTMLTableCaptionElement
sampletbl.caption.innerText = "I'm caption";

// セル（<tr>）の追加
sampletbl.insertRow();

// セル（<tr>）の削除
sampletbl.deleteRow();

・サポート状況：　???

# History インターフェースに、ブラウザバック時にスクロール位置を保持する scrollRestoration プロパティが追加

from: changes.html#features-added

アンカーリンク等でページを遷移した後に、
ブラウザバックで遷移元のページに戻ったときにスクロール位置を保存するかしないかを制御。

ブラウザの平均的なデフォルト挙動は、スクロール位置をキープ？（history.scrollRestoration = 'auto';）

・Sample page：　scroll-restoration.html

・Sample code：

// ブラウザバック時にスクロール位置をキープ（ブラウザデフォルト？）
history.scrollRestoration = 'auto';

// ブラウザバック時にスクロール位置をキープしない
history.scrollRestoration = 'manual';

・サポート状況：　developer.mozilla.org

IE、mobile 全般でサポートしていない

# Web プラットフォーム API 定義言語である Web IDL (2nd edition) に、常に同じ値を返すのがベストな状況の為の [SameObject] 拡張属性が定義された

from: changes.html#features-added

W3C HTML 5.1

IDL [SameObject], for some objects that return collections.
コレクションを返す Object の為に、IDL に [SameObject] が定義された。

IDL 2nd edition

If the [SameObject] extended attribute appears on a read only attribute, then it indicates that when getting the value of the attribute on a given object, the same value must always be returned.
もし [SameObject] 拡張属性が、読み取り専用の属性として現れた場合、その拡張属性値が指定された Object の attribut 値を取得しようとする時、いつでも必ず同じ値を返すことを示しています。

The [SameObject] extended attribute must take no arguments.
[SameObject] 拡張属性は、引数を受け取りません（いつも同じ値を返すので）。

The [SameObject] extended attribute must not be used on anything other than a read only attribute whose type is an interface type or object.
[SameObject] 拡張属性は、Interface 型や Obejct の読み取り専用属性以外の、どんなものにでも使わなくてはならないというわけではありません。

# 別ウインドウを開いた際、開いたページから親ページのコンテクストへアクセスできないようにする noopener が追加

from: changes.html#features-added

表題の通り。

・Sample page：　noopener.html

・Sample code：

<a href="noopener2.html" target="_blank" rel="noopener>ウインドウを _blank で開く</a>

open('noopener2.html', 'wn' + Math.random().toString().substr(3,9), 'noopener');

・サポート状況：　developer.mozilla.org

ブラウザの実装はあまり進んでいない

# `<script>` 要素と `<style>` 要素に、XSS 対策等向けの nonce 属性を指定できるように

from: changes.html#features-added

HTTP レスポンスヘッダ―に nonce が含まれる場合、
指定された文字列が、script タグの nonce 属性値とマッチした場合のみ、script が実行させることができる。

・Sample code：

"Content-Security-Policy: unsafe-inline; script-src 'nonce-hogefugapiyo'"

<script nonce="hogefugapiyo">
alert('Content-Security-Policy の nonce と、script タグの nonce 属性がマッチしているので実行される。');
</script>

<script>
alert('Content-Security-Policy に nonce の指定があるのに、script タグに nonce がない、match しないので、JavaScript が実行されない。');
</script>

以下の７項目は『HTML5 から HTML 5.1 で変更されたもの一覧表』から引用した、新たに追加されたもの

HTMLInputElement.reportValidity()
HTMLMediaElement.fastseek()
HTMLElement.forceSpellcheck()
<Input type="week"> <input type="month"> <input type="datetime-local">
<iframe allowfullscreen>
registerProtocolHandler()
XMLDocument interface

# required や pattern などの、ビルトイン form 要素用バリデート属性の、バリデーションを実施することができる HTMLInputElement.reportValidity() が追加

from: implementation-report.html#newfeatures

・Sample page：　report-validity.html

・Sample code：

<form method="get" action="#" id="myform4">
  <ol>
    <li>
      your name: <input type="text" name="name4"><br>
    </li>
    <li>
      your age *（必須）: <input type="text" name="age4" required>
    </li>
  </ol>
  <input type="submit" name="button" value="テスト" id="button4">
  <input type="submit" name="submit" value="送信">
</form>

<script>
  document.forms["button4"].addEventListener('submit', function() {
    document.forms["myform4"].reportValidity();
  }, false);
</script>

# 精度はともかく、速度優先で指定された時間に近い時点に変更する fastseek メソッドが追加

from: implementation-report.html#newfeatures

表題の通り。
現時点（2017-06-08）では firefox のみ対応。

  let vid  = document.getElementById('video');
  document.getElementById('button').addEventListener('click', function(){
    vid.fastSeek(1000);
  });

# forceSpellcheck()

from: implementation-report.html#newfeatures

対応ブラウザ見当たらず

# 週・時間・日時 + 時間が選択できる <input> タグの type 属性値、week・month・datetime-local が追加

from: implementation-report.html#newfeatures

・Sample page：　week-month-datetimelocal.html

・Sample code：

<ul>
  <li>
    週を選択：<input type="week" name="w" value="">
  </li>
  <li>
    時間を選択：<input type="time" name="t" value="">
  </li>
  <li>
    ローカル日時と時間を選択：<input type="datetime-local" name="d" value="">
  </li>
  <li>
    <input type="submit" value="送信">
  </li>
</ul>

# iframe タグを JS でフルスクリーンにする際、それを許容するかしないか明示する属性 allowfullscreen が追加

from: implementation-report.html#newfeatures

現在、fullscreen を開く為のメソッドにはベンダープレフィックスが必須。

・Sample page：　allowfullscreen.html

・Sample code：

<iframe src="allowfullscreen_iframe.html" width="500" height="180" allowfullscreen="true"></iframe>

// iframe を fullscreen に
document.body.webkitRequestFullscreen();

// fullscreen を解除
document.webkitCancelFullScreen();

# 特定のプロトコルに対して、指定されたリンク先の URL を受け取りつつ、既定の URL へ遷移させることが可能な registerProtocolHandler()

from: implementation-report.html#newfeatures

gmail 上で閲覧している html メール内の、mailto: プロトコルのリンク先を、一律 https://mail.google.com/mail/?extsrc=mailto&url=クリックしたURL に変更等を可能にするメソッドが追加

html5 で実装済み？

・Sample page：　regusterprotocolhandler.html

reference source: https://developers.google.com/web/updates/2012/02/Getting-Gmail-to-handle-all-mailto-links-with-registerProtocolHandler

・Sample code：

navigator.registerProtocolHandler("mailto","https://mail.google.com/mail/?extsrc=mailto&url=%s","Gmail");

# XMLDocument interface が追加

from: implementation-report.html#newfeatures

もともとあった？

reference source: http://help.dottoro.com/ljbcjfot.php

    <xml id="xmlIsland">
        <movie>
            <name>Clark Kent</name>
            <jobtitle>Superman</jobtitle>
            <born>1966</born>
        </movie>
    </xml>
    <button onclick="DisplayXMLIsland()">Get the contents of the XML island</button>

<script type="text/javascript">
    function DisplayXMLIsland() {
        var xmlIsland = document.getElementById("xmlIsland");
        if(xmlIsland.XMLDocument) {
            alert (xmlIsland.XMLDocument.xml);
        } else {
            alert("Your browser doesn't support the XMLDocument property.");
        }
    }
</script>

# 廃止されたもの

from: changes.html#features-removed

appCache が廃止

Service Worker が推奨ということでしょうか

Media Controllers が廃止

command API が廃止

<object> タグの usemap 属性が廃止

accessKeyLabel IDL 属性が廃止

<label> 属性の form 属性は valid ではなくなった

input type="range" の multiple 属性が廃止

<area> タグの hreflang と type 属性が廃止

document outline 作成の為の、<h1> タグが入っているネストされた <section> 要素の利用は NG

『セクショニング・コンテンツ毎に h1 タグ』は html 史上に残る黒歴史

フォーム送信の為の isindex 機能が廃止

navigator.yieldForStorageUpdates() と Storage mutex が廃止

tbody タグの前に tfoot を設置できなくなった

# 変更されたもの

from: changes.html#changes-to-existing-features

accesskey 値は一つの文字列のみ指定できるように変更（html4 と同様）

document.forms["myform"].addEventListener('invalid', function() {
  //Optional response here.
}, false);

document.forms["myform"].addEventListener('submit', function() {
  document.forms["myform"].reportValidity();
}, false);

sectioning contents を挟む場合に限り、<header> と <footer> タグを入れ子にすることができるように変更

<option> タグは中身が空でも valid に

mousewheel イベントは wheel イベントに変更

input type="submit" の value 属性も翻訳可能に

<figcaption> タグが、<figure> タグのどこにでも設置できるように

title 属性を持っている場合、友達に e-mail を書くような場合でも、<img> タグから alt を省いてはいけない

<time> タグはフレージング・コンテンツ、またはテキストに

同一の href 属性値を持つ <area> タグの alt 属性値を、空にすることができなくなった

ページ内リンク後、そこからのリンクその他の検索は、移動した位置から開始するものとする

<img> タグやそれに関連する要素が width="0" をサポートするように

.tFoot と .createFoot() は、常にテーブルの最後に追加されるように変更

fieldset と namedItem は、HTMLFormControlsCollections や HTMLOptionsCollections ではなく、HTMLCollectionsを作成するように

frameElement が null を返せるように変更

currentSrc で解決できないような画像は、絶対 URL のみではく、解決者によって与えられる URL に変更

meta refresh の ; と url= がオプションに

navigator.javaEnabled() がメソッドに

fileCallback は blobcallback に変更

toBlob() コールバックは non-nullabe

HTMLHyperlinkElementUtils と Location の origin プロパティが良み取り専用に

SVG タグのtitle は、一番最後に出てきたものをタイトル扱いしていたが、最初に出てきた title タグをタイトルとみなすように変更

window.open() が null を返せるように

以下の項目は『HTML5 から HTML 5.1 で変更されたもの一覧表』から引用した、
変更されたもの

from: implementation-report.html#improvements

oncopy が（正式）追加

oncut が（正式）追加

onpaste が（正式）追加

header, footer 要素は、main, header, footer タグをネストすることができなかったが、sectioning content を子要素にもつ header, footer タグに関してはネストを許容するよう修正

week, month, date などの input type の step 属性値が1を超える場合、上下矢印による減算・乗算の際、1 未満は一律 1 に統一するなどの仕様の明確化

script タグの for と event 属性が、要素属性に反映されるように

・Sample page：　htmlfor.html

・Sample code：

<button type="button" id="btn1">button</button><br>
＊ script タグの event + for 属性が、仕様どおり動くのは IE のみ。

<script for="btn1" event="onclick" id="script1">
  alert('btn1 clicked');
</script>

<script>
  var scrpt = document.getElementById('script1');
  alert('htmlfor = ' + scrpt.htmlFor + '\nevent = ' + scrpt.event);
</script>

autoplay 属性付き動画の再生が開始し、そのままどこかに seek した際、そのまま動画再生が継続されるのは違和感がある為、再生状態（autoplaying フラグ）は最初の再生後に直ちに false に

以下の項目は『HTML5 から HTML 5.1 で変更されたもの一覧表』から引用した、
Scroll restoration に関する変更

from: implementation-report.html#scroll

今回追加された history.scrollRestoration の詳細仕様に関して追記。ネストされた iframe には影響しないなど

以下の項目は『HTML5 から HTML 5.1 で変更されたもの一覧表』から引用した、
SVG の互換性に関する修正

from: implementation-report.html#SVG

ブラウザで実装されている SVG のバージョンを記載するように（実装はまだ？）

以下の項目は『HTML5 から HTML 5.1 で変更されたもの一覧表』から引用した、
他の仕様に関連した変更（Isolated integrations）

from: implementation-report.html#isolated

Resource Hints API に対する修正。link rel タイプに dns-prefetch、preconnect、prerender、and prefetch 等を追加するなど

document.all に関する最新の仕様を WHATWG から持ってきた！？

標準的なエンコーディングに関する変更をもろもろ統合

track タグの言語指定を行う srclang に関する仕様の明文化

以下の項目は『HTML5 から HTML 5.1 で変更されたもの一覧表』から引用した、
他の仕様に関連した変更（CSP hooks）

from: implementation-report.html#csp

CSP リストに関する最新仕様を WTATWG から持ってくる

以下参照先が WHATWG なので状況が把握できず

- Add hooks for inline elements
- Add hooks for CSP and Realms from ECMASCript
- Move "https state" from Window to Document

# W3C 版 HTML 5.1 変更点まとめ

今回、W3C 版 HTML 5.1 で追加・変更されたものをまとめたものの、
勧告された全てが、現段階で全てのブラウザーに実装されているわけでもなく、
こんなのが正式勧告されてるんだーと、頭に入れておけば良いのかと思います。
 
間違い、解釈の違いなどありましたらすみません。

W3C HTML 5.1 勧告
[https://www.w3.org/TR/2016/REC-html51-20161101/index.html](https://www.w3.org/TR/2016/REC-html51-20161101/index.html)

大きな変更点
[https://www.w3.org/TR/2016/REC-html51-20161101/changes.html](https://www.w3.org/TR/2016/REC-html51-20161101/changes.html)

W3C HTML5 と W3C HTML 5.1 間の変更点
[https://w3c.github.io/test-results/html51/implementation-report.html](https://w3c.github.io/test-results/html51/implementation-report.html)
  
と、このドキュメントをまとめた一方で、
WHATWG LS を推奨すべきだという見解・事実もあり、行末が見通しづらいのが現状です。
以下、状況がよく分かるリンク先を貼っておきます。
個人的には sectioning contents 毎の h1 にまつわる迷走は許しがたし…

WHATWG LS と HTML 5.1 の立ち位置
[https://github.com/momdo/talk/blob/master/webtalk_2016-09-03.pdf](https://github.com/momdo/talk/blob/master/webtalk_2016-09-03.pdf)

WHATWG LS と HTML 5.1 の差分
[https://www.w3.org/TR/2015/WD-html51-20151008/introduction.html#landscape](https://www.w3.org/TR/2015/WD-html51-20151008/introduction.html#landscape)

# \# デバイスサイズによって画像を出し分けることができる `<picture>`、`<source>` 要素の srcset 属性が追加

> from: [changes.html#features-added](https://www.w3.org/TR/2016/REC-html51-20161101/changes.html#features-added)

`<picture>`要素の子要素に`<source>`要素を配置し、srcset属性に画像をすることで、レスポンシブに対応した画像の表示が可能となります。

#### ・Sample page：　[picture.html](https://mijabi.github.io/html5.1/picture.html)

#### ・Sample code：

```html
<picture>
  <source media="(min-width: 640px)" srcset="unako_1024.jpg">
  <source media="(min-width: 320px)" srcset="unako_640.jpg">
  <img src="unako_240.jpg" alt="">
</picture>
```

srcset は、カンマで複数指定ができ、対応する devicePixelRatio によって表示する画像の出しわけも可能

```html
<picture>
  <source media="(min-width: 640px)" srcset="unako_1024.jpg">
  <source media="(min-width: 320px)" srcset="unako_640.jpg,unako_640_2x.jpg 1.5x,unako_640_2x.jpg 2x">
  <img src="unako_240.jpg" alt="" srcset="unako_240_2x.jpg 1.5x,unako_240_2x.jpg 2x">
</picture>
```

#### ・サポート状況：　[developer.mozilla.org](https://developer.mozilla.org/ja/docs/Web/HTML/Element/source#Browser_compatibility)

# \# 見出しと中身をアコーディオン開閉形式で実装することができる `<details>`、`<summary>` 要素が追加

> from: [changes.html#features-added](https://www.w3.org/TR/2016/REC-html51-20161101/changes.html#features-added)

`<details>` 要素と `<summary>` の組み合わせで、
ディスクロージャー付きの開閉式ウィジェットを実装することができる。

#### ・Sample page：　[details.html](https://mijabi.github.io/html5.1/details.html)

#### ・Sample code：

```html
<details>
  <summary>詳しくはこちら</summary>
  <p>タップでこの詳細テキストをトグル表示。</p>
</details>
```

デフォルトで開いておく open 属性がある。

```html
<details open>
  <summary>詳しくはこちら</summary>
  <p>タップでこの詳細テキストをトグル表示。デフォルトオープン。</p>
</details>
```

#### ・サポート状況：　[developer.mozilla.org](https://developer.mozilla.org/ja/docs/Web/HTML/Element/details#Browser_compatibility)

# \# &lt;menuitem&gt; タグと type="context" 属性の組み合わせで、ブラウザのコンテキストメニューに機能を追加可能に

> from: [changes.html#features-added](https://www.w3.org/TR/2016/REC-html51-20161101/changes.html#features-added)

コンテキストメニューの表示自体は、html のみで実装が可能。
現時点（2017-06-08）では firefox のみ対応。

#### ・Sample page：　[menu.html](https://mijabi.github.io/html5.1/menu.html)

#### ・Sample code：

```html
<form name="npc" contextmenu="namemenu" action="#" method="get">
  <ul>
    <li>
      <label>Character id: <input name="char" type="text" required></label>
    </li>
    <li>
      <input type="submit" name="submit" value="submit">
    </li>
  </ul>
  <menu type="context" id="namemenu">
    <menuitem label="Pick random id" onclick="document.forms.npc.elements.char.value = getRandomName()">Pick random ID</menuitem>

</menu>
</form>
```

```javascript
<script>
  function getRandomName() {
    var text = '';
    var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    for(var i = 0; i < 10; i++) {
      text += possible.charAt(Math.floor(Math.random() * possible.length));
    }
    return text;
  }
</script>
```

# \# ブラウザの描画タイミングに合わせてコールバックしてくれる requestAnimationFrame API が追加

> from: [changes.html#features-added](https://www.w3.org/TR/2016/REC-html51-20161101/changes.html#features-added)

また、ブラウザのタブが非アクティブ状態では処理がストップする為、パフォーマンス面でもアドバンテージがあると言える。

#### ・Sample page：　[request-animation-frame.html](https://mijabi.github.io/html5.1/request-animation-frame.html)

> reference source: https://liginc.co.jp/web/js/130758

#### ・Sample code：
```html
<div id="hoge" class="hoge" style="width: 200px; height: 200px; position: absolute; left: 0; top: 400px; background: #333;">
  hoge
</div>
```

```javascript
<script>
var d = document.getElementById('hoge');

var startTime = new Date().getTime();

(function loop(){
    window.requestAnimationFrame(loop);
    var currentTime = new Date().getTime();
    var status = (startTime - currentTime)/-1000;
    d.style.left = status + 'px';
})();
</script>
```

## ・サポート状況：　[Can I Use](https://caniuse.com/#feat=requestanimationframe)

# \# リンク要素のためのrev属性が復活。主に RDFa の為

> from: [changes.html#features-added](https://www.w3.org/TR/2016/REC-html51-20161101/changes.html#features-added)

#### ・Sample code：

```html
<a rev="prev" rel="next" href="/searchresult/p/2/">次のページ</a>
```

rev に指定できる値の一覧：　[www.w3.org](https://www.w3.org/TR/html/links.html#sec-link-types)

## ・サポート状況：　[???](#)

# \# HTMLMediaElement インターフェースと、そのメディアのソースを設定する為の srcObject プロパティが追加

> from: [changes.html#features-added](https://www.w3.org/TR/2016/REC-html51-20161101/changes.html#features-added)

video と audio の制御用属性と、
Web上で表示・再生するメディアのソース（MediaStream）を取得・設定するためのもの

#### ・Sample page：　[src-object.html](https://mijabi.github.io/html5.1/src-object.html)

> reference source: http://www.atmarkit.co.jp/ait/articles/1703/03/news037.html

#### ・Sample code：

```html
<p><video id="video" width="240" height="160" autoplay></video></p>
```

```javascript
<script>
  var video = document.getElementById('video');

navigator.getUserMedia =
    navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia;

if (navigator.getUserMedia) {

navigator.getUserMedia(
      {
        video: true,
        audio: false
      },
      function(stream) {
        video.srcObject = stream;
        console.log('srcObject: ' + video.srcObject);
      },
      function(err) {
        var d = document.createElement('span');
        d.innerHTML = 'Accept in-camera please.';
        video.parentNode.replaceChild(d, video);
        console.log("srcObject: " + video.srcObject);
      }
    )

}
</script>
```

## ・サポート状況：　[developer.mozilla.org](https://developer.mozilla.org/ja/docs/Web/API/HTMLMediaElement/srcObject#Browser_compatibility)

# \# `<track>` 要素と EventSource インターフェースが CORS に対応

> from: [changes.html#features-added](https://www.w3.org/TR/2016/REC-html51-20161101/changes.html#features-added)

track 要素は、動画/音声ファイルに字幕やキャプション、スクリーン リーダーのテキスト、チャプターを追加できる要素。
字幕ファイルは vtt 形式。
異なるドメインから vtt ファイルを読み込むには、 video タグに crossorigin 属性を付与する。

#### ・Sample page：　[video.html](https://mijabi.github.io/html5.1/video.html)

#### ・Sample code：

```html
// no crossorigin
<video width="320" height="240" src="intro_original_bw_build.m4v" controls autoplay>
  <track kind="captions" src="video.vtt">
  Your browser does not support the video tag.
</video>

// crossorigin
<video width="320" height="240" src="intro_original_bw_build.m4v" crossorigin controls autoplay>
  <track kind="captions" src="http://localhost/TEST/videotag/video.vtt">
  Your browser does not support the video tag.
</video>
```

＊ Access-Control-Allow-Origin を通す環境がないので完全にテストできておらず…

#### ・サポート状況：　[???](#)

# \# `<canvas>` 要素の ImageBitmap インターフェースが別ドメインのコンテンツを扱えるように

> from: [changes.html#features-added](https://www.w3.org/TR/2016/REC-html51-20161101/changes.html#features-added)

過去、別ドメインのコンテンツが扱えなかった際の挙動が調査できないが、現在では問題なくリクエストが通る。

#### ・Sample page：　[canvas.html](https://mijabi.github.io/html5.1/canvas.html)

#### ・Sample code：

```html
<div>
  <canvas id="myCanvas" width="300" height="300"></canvas>
</div>
```
```javascript
<script>
  var canvas2 = document.getElementById('myCanvas'),
  ctx = canvas2.getContext('2d'),
  image = new Image();
  image.onload = function() {
    Promise.all([
      createImageBitmap(this, 0, 0, 300, 300)
    ]).then(function(sprites) {
      ctx.drawImage(sprites[0], 0, 0, )
    });
  }
  image.src = 'http://pulp.photo/github/images.jpg';
</script>
```

#### ・サポート状況：　[???](#)

# \# `<source>` 要素に error イベントが追加

> from: [changes.html#features-added](https://www.w3.org/TR/2016/REC-html51-20161101/changes.html#features-added)

#### ・Sample page：　[video2.html](https://mijabi.github.io/html5.1/video2.html)

#### ・Sample code：

```html
<div>
  <p>video tag with invalid src path</p>
  <video controls style="width: 640px;" id="vvv">
    <source src="hoge.m4v"></source>
    <div id="fail_load_video">
      <a href="intro_original_bw_build.m4v">
        <img src="video-thumbnail.png" alt="download video"><br>
        failed to load video file, click image to download a file
      </a>
    </div>
  </video>
</div>
```

```javascript
<script>
  var v = document.getElementById('vvv');
  var sources = v.querySelectorAll('source');
  var lastsource = sources[sources.length-1];
  lastsource.addEventListener('error', function(ev) {
    var d = document.createElement('div');
    d.innerHTML = document.getElementById('fail_load_video').innerHTML;
    v.parentNode.replaceChild(d, v);
  }, false);
</script>
```

#### ・サポート状況：　[???](#)

# \# `<track>` 要素に error イベント、load イベントが追加

> from: [changes.html#features-added](https://www.w3.org/TR/2016/REC-html51-20161101/changes.html#features-added)

#### ・Sample page：　[video3.html](https://mijabi.github.io/html5.1/video3.html)

#### ・Sample code：

```html
<div>
  <p>video tag with invalid vtt path</p>
  <video controls style="width: 640px;" id="vvv">
    <source src="intro_original_bw_build.m4v"></source>
    <track kind="captions" src="hoge.vtt">
  </video>
</div>
```

```javascript
<script>
  var v = document.getElementById('vvv');
  var sources = v.querySelectorAll('track');
  var lastsource = sources[sources.length-1];

lastsource.addEventListener('error', function(ev) {
    alert('字幕用ファイルが正しく読み込めませんでした');
  }, false);
</script>
```

#### ・サポート状況：　[???](#)

# \# Promise.reject 発火時や、reject 後の then → reject 発火のタイミングを追跡する thenable onrejectionhandled や onunhandledrejection が追加

> from: [changes.html#features-added](https://www.w3.org/TR/2016/REC-html51-20161101/changes.html#features-added)

表題の通り。

#### ・Sample page：　[on_rejection_handled__on_unhandled_rejection.html](https://mijabi.github.io/html5.1/on_rejection_handled__on_unhandled_rejection.html)

#### ・Sample code：

```javascript
window.addEventListener("unhandledrejection", function(e) {
  console.log('[unhandled-rejection] reason: ' + e.reason);
});

window.addEventListener("rejectionhandled", function(e) {
  console.log('[rejection-handled] reason: ' + e.reason);
});

var promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('エラー')
  }, 1000);
});

setTimeout(() => {
  promise.then(
    v => v,
    e => e
  )
}, 2000);
```

#### ・サポート状況：　[???](#)

# \# `<table>` タグや、配下の各要素を制御できる HTMLTableCaptionElement、HTMLTableSectionElement、HTMLTableRowElement が追加

> from: [changes.html#features-added](https://www.w3.org/TR/2016/REC-html51-20161101/changes.html#features-added)

表題の通り。
    
#### ・Sample page：　[table-element.html](https://mijabi.github.io/html5.1/table-element.html)

#### ・Sample code：

```html
<table id="table">
  <thead id="thead">
    <tr>
      <th>th1</th><td>td1</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>td1</td><td>td2</td>
    </tr>  
  </tbody>
</table>
```

```javascript
var sampletbl = document.getElementById("table");

// caption タグの追加
sampletbl.caption = sampletbl.createCaption(); // HTMLTableCaptionElement
sampletbl.caption.innerText = "I'm caption";

// セル（<tr>）の追加
sampletbl.insertRow();

// セル（<tr>）の削除
sampletbl.deleteRow();
```

#### ・サポート状況：　[???](#)

# \# History インターフェースに、ブラウザバック時にスクロール位置を保持する scrollRestoration プロパティが追加

> from: [changes.html#features-added](https://www.w3.org/TR/2016/REC-html51-20161101/changes.html#features-added)

アンカーリンク等でページを遷移した後に、
ブラウザバックで遷移元のページに戻ったときにスクロール位置を保存するかしないかを制御。

ブラウザの平均的なデフォルト挙動は、スクロール位置をキープ？（history.scrollRestoration = 'auto';）

#### ・Sample page：　[scroll-restoration.html](https://mijabi.github.io/html5.1/scroll-restoration.html)

#### ・Sample code：

```javascript
// ブラウザバック時にスクロール位置をキープ（ブラウザデフォルト？）
history.scrollRestoration = 'auto';

// ブラウザバック時にスクロール位置をキープしない
history.scrollRestoration = 'manual';
```

#### ・サポート状況：　[developer.mozilla.org](https://developer.mozilla.org/ja/docs/Web/API/History#Browser_compatibility)  
IE、mobile 全般でサポートしていない

# \# Web プラットフォーム API 定義言語である Web IDL (2nd edition) に、常に同じ値を返すのがベストな状況の為の [SameObject] 拡張属性が定義された

> from: [changes.html#features-added](https://www.w3.org/TR/2016/REC-html51-20161101/changes.html#features-added)

### [W3C HTML 5.1](https://www.w3.org/TR/2016/REC-html51-20161101/changes.html)

IDL [SameObject], for some objects that return collections.
`コレクションを返す Object の為に、IDL に [SameObject] が定義された。`

### [IDL 2nd edition](https://heycam.github.io/webidl/#SameObject)

If the [SameObject] extended attribute appears on a read only attribute, then it indicates that when getting the value of the attribute on a given object, the same value must always be returned.
`もし [SameObject] 拡張属性が、読み取り専用の属性として現れた場合、その拡張属性値が指定された Object の attribut 値を取得しようとする時、いつでも必ず同じ値を返すことを示しています。`

The [SameObject] extended attribute must take no arguments.
`[SameObject] 拡張属性は、引数を受け取りません（いつも同じ値を返すので）。`

The [SameObject] extended attribute must not be used on anything other than a read only attribute whose type is an interface type or object.
`[SameObject] 拡張属性は、Interface 型や Obejct の読み取り専用属性以外の、どんなものにでも使わなくてはならないというわけではありません。`

# \# 別ウインドウを開いた際、開いたページから親ページのコンテクストへアクセスできないようにする noopener が追加

> from: [changes.html#features-added](https://www.w3.org/TR/2016/REC-html51-20161101/changes.html#features-added)

表題の通り。

#### ・Sample page：　[noopener.html](https://mijabi.github.io/html5.1/noopener.html)

#### ・Sample code：

```html
<a href="noopener2.html" target="_blank" rel="noopener>ウインドウを _blank で開く</a>
```

```javascript
open('noopener2.html', 'wn' + Math.random().toString().substr(3,9), 'noopener');
```

#### ・サポート状況：　[developer.mozilla.org](https://developer.mozilla.org/ja/docs/Web/HTML/Link_types#Browser_compatibility)  
ブラウザの実装はあまり進んでいない

# \# `<script>` 要素と `<style>` 要素に、XSS 対策等向けの nonce 属性を指定できるように

> from: [changes.html#features-added](https://www.w3.org/TR/2016/REC-html51-20161101/changes.html#features-added)

#### ・Sample code：

```
"Content-Security-Policy: unsafe-inline; script-src 'nonce-hogefugapiyo'" 
```

```html
<script nonce="hogefugapiyo">
alert('Content-Security-Policy の nonce と、script タグの nonce 属性がマッチしているので実行される。');
</script>

### 以下の７項目は『[HTML5 から HTML 5.1 で変更されたもの一覧表](https://w3c.github.io/test-results/html51/implementation-report.html)』から引用した、新たに追加されたもの

* HTMLInputElement.reportValidity()
  * HTMLMediaElement.fastseek()
  * HTMLElement.forceSpellcheck()
  * &lt;Input type="week"&gt; &lt;input type="month"&gt; &lt;input type="datetime-local"&gt;
  * &lt;iframe allowfullscreen&gt;
  * registerProtocolHandler()
  * XMLDocument interface

# \# required や pattern などの、ビルトイン form 要素用バリデート属性の、バリデーションを実施することができる HTMLInputElement.reportValidity() が追加

> from: [implementation-report.html#newfeatures](https://w3c.github.io/test-results/html51/implementation-report.html#newfeatures)

#### ・Sample page：　[report-validity.html](https://mijabi.github.io/html5.1/report-validity.html)

#### ・Sample code：

```html
<form method="get" action="#" id="myform4">
  <ol>
    <li>
      your name: <input type="text" name="name4"><br>
    </li>
    <li>
      your age *（必須）: <input type="text" name="age4" required>
    </li>
  </ol>
  <input type="submit" name="button" value="テスト" id="button4">
  <input type="submit" name="submit" value="送信">
</form>
```

```javascript
<script>
  document.forms["button4"].addEventListener('submit', function() {
    document.forms["myform4"].reportValidity();
  }, false);
</script>
```

# \# 精度はともかく、速度優先で指定された時間に近い時点に変更する fastseek メソッドが追加

> from: [implementation-report.html#newfeatures](https://w3c.github.io/test-results/html51/implementation-report.html#newfeatures)

表題の通り。
現時点（2017-06-08）では firefox のみ対応。

```javascript
  let vid  = document.getElementById('video');
  document.getElementById('button').addEventListener('click', function(){
    vid.fastSeek(1000);
  });
```

# \# forceSpellcheck()

> from: [implementation-report.html#newfeatures](https://w3c.github.io/test-results/html51/implementation-report.html#newfeatures)

対応ブラウザ見当たらず

# \# 週・時間・日時 + 時間が選択できる &lt;input&gt; タグの type 属性値、week・month・datetime-local が追加

> from: [implementation-report.html#newfeatures](https://w3c.github.io/test-results/html51/implementation-report.html#newfeatures)

#### ・Sample page：　[week-month-datetimelocal.html](https://mijabi.github.io/html5.1/week-month-datetimelocal.html)

#### ・Sample code：

```html
<ul>
  <li>
    週を選択：<input type="week" name="w" value="">
  </li>
  <li>
    時間を選択：<input type="time" name="t" value="">
  </li>
  <li>
    ローカル日時と時間を選択：<input type="datetime-local" name="d" value="">
  </li>
  <li>
    <input type="submit" value="送信">
  </li>
</ul>
```

# \# iframe タグを JS でフルスクリーンにする際、それを許容するかしないか明示する属性 allowfullscreen が追加

> from: [implementation-report.html#newfeatures](https://w3c.github.io/test-results/html51/implementation-report.html#newfeatures)

現在、fullscreen を開く為のメソッドにはベンダープレフィックスが必須。

#### ・Sample page：　[allowfullscreen.html](https://mijabi.github.io/html5.1/allowfullscreen.html)

#### ・Sample code：

```html
<iframe src="allowfullscreen_iframe.html" width="500" height="180" allowfullscreen="true"></iframe>
```

```javascript
// iframe を fullscreen に
document.body.webkitRequestFullscreen();

// fullscreen を解除
document.webkitCancelFullScreen();
```

# \# 特定のプロトコルに対して、指定されたリンク先の URL を受け取りつつ、既定の URL へ遷移させることが可能な registerProtocolHandler()

> from: [implementation-report.html#newfeatures](https://w3c.github.io/test-results/html51/implementation-report.html#newfeatures)

gmail 上で閲覧している html メール内の、mailto: プロトコルのリンク先を、一律 `https://mail.google.com/mail/?extsrc=mailto&url=クリックしたURL` に変更等を可能にするメソッドが追加

html5 で実装済み？

#### ・Sample page：　[regusterprotocolhandler.html](https://mijabi.github.io/html5.1/registerprotocolhandler.html)

> reference source: https://developers.google.com/web/updates/2012/02/Getting-Gmail-to-handle-all-mailto-links-with-registerProtocolHandler

#### ・Sample code：

```javascript
navigator.registerProtocolHandler("mailto","https://mail.google.com/mail/?extsrc=mailto&url=%s","Gmail");
```

# \# XMLDocument interface が追加

> from: [implementation-report.html#newfeatures](https://w3c.github.io/test-results/html51/implementation-report.html#newfeatures)

もともとあった？

> reference source: http://help.dottoro.com/ljbcjfot.php

```html
    <xml id="xmlIsland">
        <movie>
            <name>Clark Kent</name>
            <jobtitle>Superman</jobtitle>
            <born>1966</born>
        </movie>
    </xml>
    <button onclick="DisplayXMLIsland()">Get the contents of the XML island</button>
```

```javascript
<script type="text/javascript">
    function DisplayXMLIsland() {
        var xmlIsland = document.getElementById("xmlIsland");
        if(xmlIsland.XMLDocument) {
            alert (xmlIsland.XMLDocument.xml);
        } else {
            alert("Your browser doesn't support the XMLDocument property.");
        }
    }
</script>
```

---

&nbsp;  
# \# 廃止されたもの

> from: [changes.html#features-removed](https://www.w3.org/TR/2016/REC-html51-20161101/changes.html#features-removed)

## appCache が廃止

+ Service Worker が推奨ということでしょうか

## Media Controllers が廃止

## command API が廃止

## &lt;object&gt; タグの usemap 属性が廃止

## accessKeyLabel IDL 属性が廃止

## &lt;label&gt; 属性の form 属性は valid ではなくなった

## input type="range" の multiple 属性 が廃止

## &lt;area&gt; タグの hreflang と type 属性が廃止

## document outline 作成の為の、&lt;h1&gt; タグが入っているネストされた &lt;section&gt; 要素の利用は NG

+ 『セクショニング・コンテンツ毎に h1 タグ』は html 史上に残る黒歴史

## フォーム送信の為の isindex 機能が廃止

## navigator.yieldForStorageUpdates() と Storage mutex が廃止

## tbody タグの前に tfoot を設置できなくなった

# \# 変更されたもの

> from: [changes.html#changes-to-existing-features](https://www.w3.org/TR/2016/REC-html51-20161101/changes.html#changes-to-existing-features)

## accesskey 値は一つの文字列のみ指定できるように変更（html4 と同様）

```javascript
document.forms["myform"].addEventListener('invalid', function() {
  //Optional response here.
}, false);

document.forms["myform"].addEventListener('submit', function() {
  document.forms["myform"].reportValidity();
}, false);
```

## sectioning contents を挟む場合に限り、&lt;header&gt; と &lt;footer&gt; タグを入れ子にすることができるように変更

## &lt;option&gt; タグは中身が空でも valid に

## mousewheel イベントは wheel イベントに変更

## input type="submit" の value 属性も翻訳可能に

## &lt;figcaption&gt; タグが、&lt;figure&gt; タグのどこにでも設置できるように

## title 属性を持っている場合、友達に e-mail を書くような場合でも、&lt;img&gt; タグから alt を省いてはいけない

## &lt;time&gt; タグはフレージング・コンテンツ、またはテキストに

## 同一の href 属性値を持つ &lt;area&gt; タグの alt 属性値を、空にすることができなくなった

## ページ内リンク後、そこからのリンクその他の検索は、移動した位置から開始するものとする

## &lt;img&gt; タグやそれに関連する要素が width="0" をサポートするように

## .tFoot と .createFoot() は、常にテーブルの最後に追加されるように変更

## fieldset と namedItem は、HTMLFormControlsCollections や HTMLOptionsCollections ではなく、HTMLCollectionsを作成するように

## frameElement が null を返せるように変更

## currentSrc で解決できないような画像は、絶対 URL のみではく、解決者によって与えられる URL に変更

## meta refresh の ; と url= がオプションに

## navigator.javaEnabled() がメソッドに

## fileCallback は blobcallback に変更

## toBlob() コールバックは non-nullabe

## HTMLHyperlinkElementUtils と Location の origin プロパティが良み取り専用に

## SVG タグのtitle は、一番最後に出てきたものをタイトル扱いしていたが、最初に出てきた title タグをタイトルとみなすように変更

## window.open() が null を返せるように

&nbsp;  
### 以下の項目は『HTML5 から HTML 5.1 で変更されたもの一覧表』から引用した、<br>**変更されたもの**

> from: [implementation-report.html#improvements](https://w3c.github.io/test-results/html51/implementation-report.html#improvements)

## oncopy が（正式）追加

## oncut が（正式）追加

## onpaste が（正式）追加

## header, footer 要素は、main, header, footer タグをネストすることができなかったが、sectioning content を子要素にもつ header, footer タグに関してはネストを許容するよう修正

## week, month, date などの input type の step 属性値が1を超える場合、上下矢印による減算・乗算の際、1 未満は一律 1 に統一するなどの仕様の明確化

## script タグの for と event 属性が、要素属性に反映されるように

#### ・Sample page：　[htmlfor.html](https://mijabi.github.io/html5.1/htmlfor.html)

#### ・Sample code：

```html
<button type="button" id="btn1">button</button><br>
＊ script タグの event + for 属性が、仕様どおり動くのは IE のみ。
```

```javascript
<script for="btn1" event="onclick" id="script1">
  alert('btn1 clicked');
</script>

## autoplay 属性付き動画の再生が開始し、そのままどこかに seek した際、そのまま動画再生が継続されるのは違和感がある為、再生状態（autoplaying フラグ）は最初の再生後に直ちに false に

&nbsp;  
### 以下の項目は『HTML5 から HTML 5.1 で変更されたもの一覧表』から引用した、<br>**Scroll restoration に関する変更**

> from: [implementation-report.html#scroll](https://w3c.github.io/test-results/html51/implementation-report.html#scroll)

## 今回追加された history.scrollRestoration の詳細仕様に関して追記。ネストされた iframe には影響しないなど

&nbsp;  
### 以下の項目は『HTML5 から HTML 5.1 で変更されたもの一覧表』から引用した、<br>**SVG の互換性に関する修正**

> from: [implementation-report.html#SVG](https://w3c.github.io/test-results/html51/implementation-report.html#SVG)

## ブラウザで実装されている SVG のバージョンを記載するように（実装はまだ？）

&nbsp;  
### 以下の項目は『HTML5 から HTML 5.1 で変更されたもの一覧表』から引用した、<br>**他の仕様に関連した変更（Isolated integrations）**

> from: [implementation-report.html#isolated](https://w3c.github.io/test-results/html51/implementation-report.html#isolated)

## Resource Hints API に対する修正。link rel タイプに dns-prefetch、preconnect、prerender、and prefetch 等を追加するなど

## document.all に関する最新の仕様を WHATWG から 持ってきた！？

## 標準的なエンコーディングに関する変更をもろもろ統合

## track タグの言語指定を行う srclang に関する仕様の明文化

&nbsp;  
### 以下の項目は『HTML5 から HTML 5.1 で変更されたもの一覧表』から引用した、<br>**他の仕様に関連した変更（CSP hooks）**

> from: [implementation-report.html#csp](https://w3c.github.io/test-results/html51/implementation-report.html#csp)

## CSP リストに関する最新仕様を WTATWG から持ってくる

## 以下参照先が WHATWG なので状況が把握できず
    - Add hooks for inline elements
    - Add hooks for CSP and Realms from ECMASCript
    - Move "https state" from Window to Document

mijabi

199Contribution

W3C 版 HTML 5.1 変更点まとめ

W3C 版 HTML 5.1 変更点まとめ

# デバイスサイズによって画像を出し分けることができる <picture>、<source> 要素の srcset 属性が追加

・Sample page： picture.html

・Sample code：

・サポート状況： developer.mozilla.org

# 見出しと中身をアコーディオン開閉形式で実装することができる <details>、<summary> 要素が追加

・Sample page： details.html

・Sample code：

・サポート状況： developer.mozilla.org

# <menuitem> タグと type="context" 属性の組み合わせで、ブラウザのコンテキストメニューに機能を追加可能に

・Sample page： menu.html

・Sample code：

# ブラウザの描画タイミングに合わせてコールバックしてくれる requestAnimationFrame API が追加

・Sample page： request-animation-frame.html

・Sample code：

・サポート状況： Can I Use

# リンク要素のためのrev属性が復活。主に RDFa の為

・Sample code：

・サポート状況： ???

# HTMLMediaElement インターフェースと、そのメディアのソースを設定する為の srcObject プロパティが追加

・Sample page： src-object.html

・Sample code：

・サポート状況： developer.mozilla.org

# <track> 要素と EventSource インターフェースが CORS に対応

・Sample page： video.html

・Sample code：

・サポート状況： ???

# <canvas> 要素の ImageBitmap インターフェースが別ドメインのコンテンツを扱えるように

・Sample page： canvas.html

・Sample code：

・サポート状況： ???

# <source> 要素に error イベントが追加

・Sample page： video2.html

・Sample code：

・サポート状況： ???

# <track> 要素に error イベント、load イベントが追加

・Sample page： video3.html

・Sample code：

・サポート状況： ???

# Promise.reject 発火時や、reject 後の then → reject 発火のタイミングを追跡する thenable onrejectionhandled や onunhandledrejection が追加

・Sample page： on_rejection_handled__on_unhandled_rejection.html

・Sample code：

・サポート状況： ???

# <table> タグや、配下の各要素を制御できる HTMLTableCaptionElement、HTMLTableSectionElement、HTMLTableRowElement が追加

・Sample page： table-element.html

・Sample code：

・サポート状況： ???

# History インターフェースに、ブラウザバック時にスクロール位置を保持する scrollRestoration プロパティが追加

・Sample page： scroll-restoration.html

・Sample code：

・サポート状況： developer.mozilla.org

# Web プラットフォーム API 定義言語である Web IDL (2nd edition) に、常に同じ値を返すのがベストな状況の為の [SameObject] 拡張属性が定義された

W3C HTML 5.1

IDL 2nd edition

# 別ウインドウを開いた際、開いたページから親ページのコンテクストへアクセスできないようにする noopener が追加

・Sample page： noopener.html

・Sample code：

・サポート状況： developer.mozilla.org

# <script> 要素と <style> 要素に、XSS 対策等向けの nonce 属性を指定できるように

・Sample code：

以下の７項目は『HTML5 から HTML 5.1 で変更されたもの一覧表』から引用した、新たに追加されたもの

# required や pattern などの、ビルトイン form 要素用バリデート属性の、バリデーションを実施することができる HTMLInputElement.reportValidity() が追加

・Sample page： report-validity.html

・Sample code：

# 精度はともかく、速度優先で指定された時間に近い時点に変更する fastseek メソッドが追加

# forceSpellcheck()

# 週・時間・日時 + 時間が選択できる <input> タグの type 属性値、week・month・datetime-local が追加

・Sample page： week-month-datetimelocal.html

・Sample code：

# iframe タグを JS でフルスクリーンにする際、それを許容するかしないか明示する属性 allowfullscreen が追加

・Sample page： allowfullscreen.html

・Sample code：

# 特定のプロトコルに対して、指定されたリンク先の URL を受け取りつつ、既定の URL へ遷移させることが可能な registerProtocolHandler()

・Sample page： regusterprotocolhandler.html

・Sample code：

# XMLDocument interface が追加

# 廃止されたもの

appCache が廃止

Media Controllers が廃止

# デバイスサイズによって画像を出し分けることができる `<picture>`、`<source>` 要素の srcset 属性が追加

・Sample page：　picture.html

・サポート状況：　developer.mozilla.org

# 見出しと中身をアコーディオン開閉形式で実装することができる `<details>`、`<summary>` 要素が追加

・Sample page：　details.html

・サポート状況：　developer.mozilla.org

・Sample page：　menu.html

・Sample page：　request-animation-frame.html

・サポート状況：　Can I Use

・サポート状況：　???

・Sample page：　src-object.html

・サポート状況：　developer.mozilla.org

# `<track>` 要素と EventSource インターフェースが CORS に対応

・Sample page：　video.html

・サポート状況：　???

# `<canvas>` 要素の ImageBitmap インターフェースが別ドメインのコンテンツを扱えるように

・Sample page：　canvas.html

・サポート状況：　???

# `<source>` 要素に error イベントが追加

・Sample page：　video2.html

・サポート状況：　???

# `<track>` 要素に error イベント、load イベントが追加

・Sample page：　video3.html

・サポート状況：　???

・Sample page：　on_rejection_handled__on_unhandled_rejection.html

・サポート状況：　???

# `<table>` タグや、配下の各要素を制御できる HTMLTableCaptionElement、HTMLTableSectionElement、HTMLTableRowElement が追加

・Sample page：　table-element.html

・サポート状況：　???

・Sample page：　scroll-restoration.html

・サポート状況：　developer.mozilla.org

・Sample page：　noopener.html

・サポート状況：　developer.mozilla.org

# `<script>` 要素と `<style>` 要素に、XSS 対策等向けの nonce 属性を指定できるように

・Sample page：　report-validity.html

・Sample page：　week-month-datetimelocal.html

・Sample page：　allowfullscreen.html

・Sample page：　regusterprotocolhandler.html

input type="range" の multiple 属性が廃止

以下の項目は『HTML5 から HTML 5.1 で変更されたもの一覧表』から引用した、
変更されたもの

・Sample page：　htmlfor.html

以下の項目は『HTML5 から HTML 5.1 で変更されたもの一覧表』から引用した、
Scroll restoration に関する変更

以下の項目は『HTML5 から HTML 5.1 で変更されたもの一覧表』から引用した、
SVG の互換性に関する修正

以下の項目は『HTML5 から HTML 5.1 で変更されたもの一覧表』から引用した、
他の仕様に関連した変更（Isolated integrations）

document.all に関する最新の仕様を WHATWG から持ってきた！？

以下の項目は『HTML5 から HTML 5.1 で変更されたもの一覧表』から引用した、
他の仕様に関連した変更（CSP hooks）