maesblog

HTML 5.1勧告によるHTML5の仕様変更点まとめ

2016年11月1日にW3CによるHTML5.1勧告版が公開されました。いわゆるHTML5.1の正式版となるものです。HTML5の勧告が2014年の10月28日だったので、実に2年ぶりのアップデートとなります。変更点もそれなりにあるので、細かく見てみることにしました。軽くまとめておきますので、参考にしてみてください。

まず11月1日に公開されたHTML5.1 W3C勧告版は以下となります。

HTML 5.1 W3C Recommendation, 1 November 2016

HTML 5.1 W3C Recommendation, 1 November 2016

HTML5から今回のHTML5.1までに加えられた変更点は以下にまとめられています。今回は以下に記載されている内容をまとめました。

なお、上記のChangesに記載されているもの以外にも変更点はあります。それらについては以下をご確認ください。

目次

新たに追加された仕様

<picture>要素、<source>要素のsrcset属性が追加されました

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

<picture>
  <source media="(min-width: 45em)" srcset="large.png">
  <source media="(min-width: 32em)" srcset="middle.png">
  <img src="small.png" alt="雪道を走り抜けるオオカミ">
</picture>

参考

<details>要素、<summary>要素が追加されました

追加情報を<details>要素で指定すると、ユーザーが読むかどうか選択できるディスクロージャー・ウィジェット表示となります。<summary>要素は追加情報の概要などを<details>要素内に表示する際に指定します。

<details>
  <summary>詳細情報</summary>
  <p>hogehogeに関する詳細情報です。</p>
</details>

以下は実装例です。”詳細情報”の箇所をクリックしてみてください。

詳細情報

hogehogeに関する詳細情報です。

参考

<menuitem>要素、<menu>要素のtype属性値”context”が追加されました

<menu type=”context”>とすると、右クリックで表示されるコンテキストメニューに対応するようになりました。その時に表示する各メニューを<menu>要素の子要素として<menuitem>要素で指定します。

<menu type="context" id="catsmenu">
  <menuitem label="Pet the kittens" onclick="kittens.pet()">
  <menuitem label="Cuddle with the kittens" onclick="kittens.cuddle()">
</menu>

参考

requestAnimationFrame APIが追加されました

window.requestAnimationFrame()メソッドを実行すると、ブラウザが次の再描画を行う前に、引数で渡したアニメーション更新用のコールバック関数が呼び出されます。

var start = Date.now();

function step(timestamp) {
  var progress = timestamp - start;
  d.style.left = Math.min(progress/10, 200) + "px";
  if (progress < 2000) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);

参考

enqueueJob()メソッドとnextJob()メソッドが追加されました

マイクロタスク単位でPromiseの解決を行うメソッドとなります。ECMAScriptをモンキーパッチしています。

参考

リンクのためにrev属性が復活しました

rev属性はリンク先から見た関係を示すためのものです。HTML5で一旦廃止された属性でしたが、主にRDFaに対応することを目的に復活しました。

<link rev="made" href="mail@example.com">

<a rev="prev" href="index2.html">次のページ</a>
HTMLMediaElementインターフェースとそのsrcObjectプロパティが追加されました

HTMLMediaElementインターフェースはメディアを制御するための機能セットで、HTMLMediaElement.srcObjectは再生中のMediaStreamをset/getするためのプロパティです。

参考

<track>要素とEventSourceインターフェースがCORSに対応し、<canvas>要素のImageBitmapインターフェースが別ドメインのコンテンツを扱えるようになりました

Cross-origin関連のアップデートです。以下は<track>要素を使ったcross-originのサンプルの実装例です。

<video width="320" height="240" controls crossorigin>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <track kind="captions" src="https://chaals.github.io/testcases/webvtt-file.vtt">
  Your browser does not support the video tag.
</video>

参考

<source>要素にerrorイベント、<track>要素にerrorイベント、loadイベントが追加されました

メディアをfetchする際に必要になる各要素のイベントとなります。

参考

onrejectionhandledやonunhandledrejectionなどpromiseのリジェクトを追跡するためのAPIが追加されました

Window.onrejectionhandledプロパティは、Promiseがリジェクトされたときに発火するrejectionhandledイベントを処理するためのイベントハンドラです。

Window.onunhandledrejectionプロパティは、catchしてないPromiseでエラーが発生した時に発火するunhandledrejectionイベントを処理するためのイベントハンドラです。

参考

HTMLTableCaptionElement, HTMLTableSectionElement,
HTMLTableRowElementが追加されました

HTMLドキュメント内のtableの各要素の表示やレイアウトの操作を行うためのインターフェースです。

参考

HistoryインターフェースにscrollRestorationプロパティが追加されました

ブラウザでは、ページ遷移が発生すると事前のスクロール位置が保存され、戻るボタンなどで戻ってきた時にスクロール位置が復元されます。しかし複雑なWebアプリではこの挙動を制御したい場合があります。このhistory.scrollRestorationを使うことでこの復元処理を行うか行わないか制御することができるようになりました。

// scroll位置を復元させない場合
history.scrollRestoration = 'manual';

// scroll位置を復元する場合
history.scrollRestoration = 'auto';

参考

コレクションを返すオブジェクトのために、[SameObject]拡張属性がWeb IDLに追加されました

参考

rel属性とwindow.openの引数に"noopener"の指定が可能となりました

別ウィンドウでページを開いた場合、開いたページから元のページの中身を書き換えたり悪さをすることができました。以下のように"noopener"を指定することで、別ウィンドウで開いたページから元のコンテキストにアクセスできないようにすることが可能となりました。

<!-- rel属性で指定する場合 -->
<a href="http://example.com" target=_blank rel="noopener">

<!-- ============================ -->

<!-- window.openで指定する場合 -->
<script>
var win = window.open("http://example.com", "example_windowName", "noopner");
</script>

参考

<script>要素と<style>要素にnonce属性を指定することができるようになりました

XSSなどの攻撃を防ぐために、HTTPレスポンスヘッダーに記述したContent Security Policy（CSP）の値と同じものを、<script>要素や<style>要素のnonce属性に指定しておくことで、値が一致した場合のみscriptやstyleを実行させることができるようになります。
※ちなみに、nonce（ノンス）はnumber used onceの略で、1回だけ使われる数字（ワンタイムトークン）のことです。

<!--
HTTPレスポンスヘッダーに以下が記述されていたとして
Content-Security-Policy: script-src 'nonce-IXsYpasHTq4N2QudB8RswA=='
-->

<script nonce="IXsYpasHTq4N2QudB8RswA==">
console.log('hoge'); // => hoge
</script>

<script>
console.log('hoge'); // => 実行されない
</script>

参考

廃止された仕様

appCacheが廃止されました

Application Cache（appCache）は、ユーザがオフライン状態で利用できるリソースをブラウザにキャッシュするためのインターフェースでした。代わりにService Workers APIの使用が推奨されています。

参考

Media Controllersが廃止されました

オーディオや動画を制御するためのシークバーや停止/再生ボタンなどを簡単に実装するためのMedia要素のMediaControllerオブジェクトやmediagroup属性が廃止されました。

参考

command APIが廃止されました

操作メニューの各コマンドを指定する際に使用する<command>要素を操作するためのAPIでした。今後は代わりに新たに策定された<menuitem>要素を使うことになります。

参考

<object>要素からusemap属性が削除されました
<map>要素を参照するためのハッシュ名を指定する任意属性でした。
accessKeyLabel IDL属性が削除されました
accessKeyLabel IDL属性は、ユーザーエージェントによって割り当てられたキーの組み合わせを表す文字列を返すためのグローバル属性でした。
<label>要素のform属性が意味をなさなく（無効と）なりました
フォームとラベルを関連付けるために<form>要素のidを指定する属性でした。HTML5.1では、<label>要素とその指し示すフォームコントロールは、必ず<form>要素の子孫要素として配置するようにします。
<input type="range">要素からmultiple属性が削除されました

以下のように複数のvalue値を指定することが可能でした。

<input type=range multiple min=0 max=10 step="0" value="3,5">
<area>要素からhreflang属性とtype属性が削除されました
hreflang属性はリンク先ドキュメントの言語コードを、type属性はリンク先ドキュメントのMIMEタイプを指定するための任意属性でした。
アウトラインを作るために、<h1>要素を持つ<section>要素を入れ子にすることができなくなりました

以下のような見出しを<h1>要素にして<section>要素をネストすることができなくなりました。

<section>
 <h1>a heading</h1>
 <section>
  <h1>a heading for a subsection</h1>

HTML 5.1でこの仕様が削除されたのは、モダンブラウザではネストされたh1要素をh2-h6レベルのように扱うことができますが、その弊害としてcssが破綻しやすくなり、ブラウザのAccessibility APIがネストされたh1要素をh1レベルとして扱ってしまってアクセシビリティ的にもよろしくないからということのようです。詳しい経緯は以下をご参照ください。

<isindex>要素によるフォーム送信機能が廃止されました
<isindex>要素は、一行の入力フィールドを表示し、enterキーを押すことでデータの送信を可能とする要素でした。
navigator.yieldForStorageUpdates()とストレージ・ミューテックス（Storage mutex）が廃止されました
ストレージ・ミューテックスは、シェア状態にあるcookieなどにブラウザがアクセスする際に使われるミューテックス（排他制御）でした。yieldForStorageUpdates()はそのミューテックスの処理に使われるNavigatorStorageUtilsインターフェースのメソッドでした。
<tfoot>要素は、<tbody>要素の前に書いてはいけなくなりました

かつてHTML4.01では<tbody>要素の前に<tfoot>要素を書くようになっていました。HTML5になり<tbody>要素の前でも後でもよくなりましたが、今回のHTML5.1では<tbody>要素や<tr>要素の前方に書くことが禁止となりました。

<!-- before: HTML5 -->
<table>
  <tfoot><tr><td>tfoot</td></tr></tfoot>
  <tbody><tr><td>tbody</td></tr></tbody>
</table>

<!-- after: HTML 5.1 -->
<table>
  <tbody><tr><td>tbody</td></tr></tbody>
  <tfoot><tr><td>tfoot</td></tr></tfoot>
</table>

参考

HTMLHyperLinkElementUtilsインターフェースの[Exposed=Window]拡張属性,
DOMStringMapインターフェースの[Exposed=Window, Worker]拡張属性, IDL Dateが削除されました

経緯など詳細は以下をご参照ください。

変更された仕様

accesskey属性に設定できるアクセスキーは１つのみとなりました

HTML5となり、一旦複数のアクセスキーを設定できるようになりましたが、HTML 4の時と同じように再度1つのみとなりました。

<!-- before: HTML5 -->
<a href="index.html" accesskey="L 1">リンク</a>

<!-- after: HTML 5.1 -->
<a href="index.html" accesskey="L">リンク</a>

参考

<header>要素と<footer>要素を入れ子にすることが可能となりました

<header>要素と<footer>要素が、セクショニング要素（<article>要素、<section>要素、<nav>要素、<aside>要素）内に配置されていた場合、以下のようにネストすることが可能となりました（以下は<header>要素の場合。<footer>要素の場合も同様）。

<article>
  <header>
    <h1>Flexbox: The definitive guide</h1>
    <aside>
      <header>
        <h2>About the author: Wes McSilly</h2>
      </header>
      <p>Expert in nothing but Flexbox. Talented circus sideshow.</p>
    </aside>
  </header>
  <p><ins>The guide about Flexbox was supposed to be here, but it
    turned out Wes wasn’t a Flexbox expert either.</ins></p>
</article>

参考

<option>要素を空で指定することが可能となりました

label属性が指定されていない場合でも、<option></option>や<option label=""></option>といったように空で指定することが可能となりました。

参考

mouseWheelEventがWheelEventに変更されました

WheelEventインターフェースは、ユーザがマウスホイールやホイールに似たデバイスを動かしたときに発生するイベントを扱います。MouseWheelEventおよびMouseScrollEventインターフェイスの代替機能となります。

参考

<input type="submit">要素のvalue属性が翻訳可能属性となりました

<input type="submit">要素のvalue値は、（Googleの自動翻訳などにより）ページがローカライズされた際に翻訳されるようになりました。

参考

<figcaption>要素を<figure>要素内のどこにでも配置することが可能となりました

以前は<figure>要素の最初か最後にのみ配置が可能でしたが、HTML5.1では以下のような配置も可能となりました。

<!-- before: HTML5 -->
<figure>
  <p>Lorem ipsum dolor sit amet...</p>
  <figcaption>Fig.1 Latin text</figcaption>
</figure>

<!-- after: HTML 5.1 -->
<figure>
  <img src="Fig2.png" alt="Lorem Ipsum dolor sit amet..." />
  <figcaption>Fig.2 Latin text</figcaption>
  <p>Lorem Ipsum dolor sit amet...</p>
</figure>

参考

title属性を持っている場合や、友達に送るHTMLメールを書く場合でも、<img>要素のalt属性を省略することができなくなりました

ほぼほぼ省略不可（必須）となりました。ただし、以下の条件に適合した場合のみ例外的に省略が許されます。

  1. If the image is a descendant of a <figure> element that has a child <figcaption> element, and, ignoring the <figcaption> element and its descendants, the <figure> element has no Text node descendants other than inter-element whitespace, and no embedded content descendant other than the <img> element, then the contents of the first such <figcaption> element are the caption information; abort these steps.
  2. There is no caption information.

参考

<img>要素にwidth="0"を指定することができるようになりました
画像を表示させるのではなく、PVをカウントする目的などに<img>要素を使う場合の指定方法です。この時alt属性値は空とします。
<img src="https://server3.example.com/count.pl?mae.chab.in" width="0" height="0" alt="">

参考

.createTFoot()メソッドで作成した<tfoot>要素がtableの一番下に挿入され、.tfootプロパティで参照する<tfoot>要素もtableの一番下のものとなりました
削除された仕様として、<tfoot>要素が<tbody>要素の前に書いてはいけなくなったように、.createTFoot()メソッドで作成した<tfoot>要素はtableの一番下に挿入されるようになりました。また.tfootプロパティで参照する<tfoot>要素もtableの一番下のtfoot要素となりました。
<table>
  <tbody><tr><td>tbody</td></tr></tbody>
</table>

<script>
var mytable = document.querySelector("table");
var myfoot = document.querySelector("tfoot");
mytable.createTFoot();
console.log(mytable.lastElementChild === mytable.tFoot); // => true
</script>

参考

<fieldset>要素はHTMLCollectionインターフェースを返すようになり、namedItem()メソッドはHTMLCollectionインターフェースのメソッドとなりました

<fieldset>要素のelements IDL属性はもともとHTMLFormControlsCollectionインターフェースを返すようになっていましたが、HTML5.1ではHTMLCollectionインターフェースを返すようになりました。またnamedItem()メソッドはもともとHTMLOptionsCollectionインターフェースのメソッドでしたが、HTML5.1ではHTMLCollectionインターフェースのメソッドとなりました。

参考

frameElementがクロスオリジンの状況でnullを返すようになりました

window.frameElementは、「<iframe>や<object>のようなウィンドウ」が埋め込まれた要素を返します。HTML5では存在しない場合のみnullを返し、クロスオリジンの状況ではSecurityErrorの例外を投げるようになっていました。HTML5.1となり、クロスオリジンの状況でもnullを返すようになりました。

参考

解決できない画像には、必ずしも絶対URLではなく、currentSrc（現在のURL）が与えられるようになりました
// <img src="//[" id="img">要素がdocuent内にあったとして

// before: HTML5
var img = document.querySelector("#img");
console.log(img.currentSrc); // => file///

// after: HTML 5.1
var img = document.querySelector("#img");
console.log(img.currentSrc); // => //[

参考

<time>要素のコンテントモデルがPhrasing contentまたはtextとなりました

HTML5では、Phrasing contentとなっていましたが、HTML5.1では、datetime属性を持っていた場合はPhrasing content、それ以外の場合はtextとなりました。

参考

<area>要素のalt属性は空で指定することができなくなりました

同じ<map>要素内で、同じリンク先（href属性値）が指定された<area>要素があり、そこに空でないalt属性が指定されている場合は、alt属性の値を省略することができましたが、HTML5.1ではこれが禁止されました。

<!-- before: HTML5 -->
<area shape="rect" coords="100,0,200,30" href="http://mae.chab.in" alt="maechabin">
<area shape="rect" coords="300,0,400,30" href="http://mae.chab.in" alt="">

<!-- after: HTML 5.1 -->
<area shape="rect" coords="100,0,200,30" href="http://mae.chab.in" alt="maechabin">
<area shape="rect" coords="300,0,400,30" href="http://mae.chab.in" alt="maechabin">

参考

サイト内をナビゲートする際は、動いたところから次のリンクを探す（Focusする）ようになりました

focus navigationに関する変更となります。仕様から「optionally」という記載が削除されました。例えば、ユーザーがページ上のどこかでクリックしたとしたら、そこにフォーカスがセットされるようになりました。タブを押すと、クリック箇所の次のリンクにフォーカスが移動することになります。

参考

<script>要素のIDL属性eventとhtmlForがcontent属性を反映するようになりました。

<script>要素に指定したcontent属性のforとeventが、scriptのIDL属性htmlForとeventに反映されるようになりました。

<!-- content属性 -->
<script for="hoge" event="onclick">
console.log("fuga");
</script>

<!-- IDL属性 -->
<script>
var myScript = document.querySelector('script');
console.log(myScript.htmlFor); // => hoge
console.log(myScript.event); // => onclick
</script>

参考

meta refreshにおいて;とurl=を付けなくてもよくなりました

meta refresh（メタリフレッシュ）はページに転送設定を指定するための属性です。以下のように;とurl=を省略して書くことが可能となりました。

<!-- before: HTML5 -->
<meta http-equiv="refresh" content="5; url=http://mae.chab.in">

<!-- after: HTML 5.1 -->
<meta http-equiv="refresh" content="5 http://mae.chab.in">

参考

navigator.javaEnabled()がメソッドになりました

現在のブラウザでJavaが有効かどうか確認する際に使用します。有効の場合はtrueを返します。HTML5ではプロパティだったのが、HTML5.1でメソッドとなりました。

if (window.navigator.javaEnabled()) {
  // ブラウザで Java は有効です。
}

参考

HTMLCanvasElement.toBlob()メソッドでFileCallbackの代わりにBlobCallbackが使われるようになりました

HTMLCanvasElement.toBlob()メソッドは、Fileオブジェクトの詳細を指定しているわけではなく、混乱の元となるからだということです。詳細は以下をご参照ください。

参考

HTMLCanvasElement.toBlob()メソッドに渡すcallback関数の引数はnon-nullable（null非許容型）となりました

以下を実行すると、errorが返されるようになりました。

document.createElement('canvas').toBlob(null)

参考

HTMLHyperlinkElementUtilsインターフェースとLocationインターフェースのoriginプロパティが読み取り専用となりました

HTMLHyperlinkElementUtilsとLocationはリンク周りを扱うインターフェースです。以下のように両インターフェースのoriginプロパティは読み取り専用となり、値を代入しても書き換えができなくなりました。

// HTMLHyperlinkElementUtils.origin
// <a id="hoge" href="http://mae.chab.in/hoge/fuga">要素がdocuent内にあったとして
var hoge = document.querySelector('#hoge');
console.log(hoge.origin); // => http://mae.chab.in
hoge.origin = "http://example.com/hoge/fuga";
console.log(hoge.origin); // => http://mae.chab.in ※http://example.comとならない

// Location.origin
var fuga = document.createElement('a');
fuga.href = 'http://mae.chab.in/hoge/fuga';
console.log(fuga.origin); // => http://mae.chab.in
fuga.origin = "http://example.com/hoge/fuga";
console.log(fuga.origin); // => http://mae.chab.in　※http://example.comとならない

参考

SVGの<title>要素は、最後ではなく、最初の子要素として作成することになりました

SVGでtitle要素を作る際は、root要素にappendするのではなく、root要素の最初の要素としてinsertすることになりました。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1" width="4in" height="3in">
  <g>
    <title>Company sales by region</title>
    <desc>
      This is a bar chart which shows 
      company sales by region.
    </desc>
  </g>
</svg>

参考

window.open()がwindowを開くのに失敗した時にnullを返すようになりました

通常は新しく開いたwindow自身を返しますが、ポップアップブロックなどによりWindowを開くのに失敗した場合はnullを返すようになりました。

参考

まとめ

以上、HTML 5.1の主な変更内容をまとめてきました。今回はマイナーアップデートということで、<picture>要素の追加あたりが目玉となりますかね。それからtable関連、メディア関連、セキュリティ関連のアップデートもそれなりにあったかなといった印象です。<h1>要素を含んだ<section>要素がネストできなくなったという点も、以前から推奨はされていなかったし、アクセシビリティを考慮してとのことなので、自然の流れかなと言ったところです。

なお、HTML 5.1は勧告されましたが、現時点で全てのブラウザに実装されている訳ではないので、使用する際は注意が必要です。以下などを参考にしてください。

それから、このHTML 5.1はW3Cが勧告したものとなり、別にHTML5の仕様を検討しているWHATWGのものと若干違いがあったりします。両者の差異については以下などをご参考にしてください。

今回仕様を調べるに当たって参考にしたサイトを紹介しておきます。

すでに次のHTML 5.2の勧告に向けて、草案も出されています。興味があれば、この辺も追っていくのもいいかもしれません。

内容に間違いなどありましたら、ご指摘くださると助かります。

関連記事

コメント

  • 必須

コメント