2016年秋登場！HTML5.1で追加される新機能とは？ ｜ SiTest (サイテスト) ブログ

こんにちは、SiTest事業部エンジニアの森永です。

HTML5が2014年10月に正式に勧告されてから1年半経ちますが、現在HTML5.1の仕様が検討されています。
W3Cは2016年9月に勧告する計画を先月6日にW3C Blogで発表しました。

HTML5.1は、HTML5のマイナーバージョンアップとなり既存のHTML5が大きく変化するものではありませんが、いくつかの新機能が搭載される予定となっています。

中でも、Webサイトを制作する方、およびWebアプリケーションを開発する方にとって一番大きな新機能はpicture要素の導入でしょう。

picture要素は、子要素として0個以上のsource要素と1個のimg要素を含むように構成されます。そして、通常はimg要素で指定した画像、画面サイズが指定したサイズ以上(または指定したサイズ以下)の時はsource要素で指定した画像といったように、2つ以上の画像をpicture要素内に設定して表示する画像をレスポンシブに切り替えることができます。

下記の例では、通常時は”small.jpg”を表示しますが画面サイズが1000px以上の場合に”large.jpg”に画像を切り替えます。

[例]

<picture>
  <source media="(min-width: 1000px)" srcset="large.jpg">
  <img src="small.jpg" alt="Sample image.">
</picture>

今までであれば、CSSやJavaScriptを使って画像の切り替えを行っていたケースでもpicture要素だけで簡単に切り替えることができ、利便性が格段に向上するケースが多いと推測できます。

他にもHTML5.1で追加される新機能はいろいろあります。その一部を紹介します。

1.概要と詳細説明のウィジェットを実現するdetails,summary要素

details要素内に概要が記載されたsummary要素、および詳細内容を含んだコンテンツを記載すると、初期表示時はsummary要素の内容のみが表示されていますが、summary要素で表示されている部分をクリックすると詳細内容が表示されるようになります。

[例]

<details>
  <summary>サンプル</summary>
  <p>ここに詳細内容を記載します</p>
</details>

2.input要素内のtype属性に、datetime,month,weekなど新たな種類の追加

ブラウザ側から日時、週、月の入力が簡単に行うことが出来るようになります。

[例]

<input type="datetime">
<br>
<input type="month">
<br>
<input type="week">

3.table要素において、表のソートが可能になるsortable属性の追加

これまでは表を表示するのみで、ソートするためにはJavaScriptのコーディングが必要でしたが、HTML5.1ではsortable属性を用いることで簡単に実現できます。

[例]

<table sortable>
  <thead>
    <tr>
      <th>見出し1</th>
      <th>見出し2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>12</td>
      <td>34</td>
    </tr>
    <tr>
      <td>56</td>
      <td>78</td>
    </tr>
  </tbody>
</table>

これ以外にも様々な機能の追加が予定されています。

最新の仕様はGitHubにアップされており、従来よりもオープンな形で広く公開されています。

また、今後は1年に1回のペースでのバージョンアップを目指しているとのことです。すなわち、来年以降もHTML5.2、5.3 …… とバージョンアップが続くものと思われます(もちろんどこかのタイミングで「HTML6」になるかもしれません)。

なお、新しいバージョンが正式に勧告されても当然ブラウザ側で対応されないと使えませんが、一部のブラウザでは既に先行対応されています。弊社でもWindows版およびMacOS版のGoogle Chromeで、上記のpicture要素、details要素/summary要素、input要素(type=”week”および”month”)が動作することを確認できました。他のブラウザでも順次対応されるものと思われます。

新機能が追加されるHTML5.1。9月の登場が待たれるところです。

追記(2016年10月7日)

W3Cから勧告案が9月16日に公開されましたが、勧告案に対するW3Cメンバー企業からのコメントを4週間(10月13日まで)受け付けており、正式勧告はその後(早くても10月13日)となります。
また、4月の計画発表以降、勧告案までに以下の変更がありました。

• table要素のsortable属性は不採用となりました。
• input要素のtype属性について”datetime”は”datetime-local”に変更となりました。

追記2(2016年11月1日)

11月1日付けでHTML5.1が正式に勧告されました。

今後の展望について、さらに記事にいたしましたのでこちらも併せてご覧ください。
HTML 5.1が勧告され、HTML 5.2やその後のHTMLはどうなっていくのか？