インターネット上には様々な記事が存在しますが、意外と「HTML5.1」について書いている人は少ないです。

ちなみに、皆さんが使ってるHTMLは4.01ですか？5ですか？
もちろん、2016年11月1日に（W3Cによる）HTML5.1勧告版が公開されたことは知ってますよね！

HTML 5.1 W3C Recommendation, 1 November 2016

その中でも僕がチェックしていた変更点などを「今更」ですが、公開します。

正式勧告なので、明日から使ってもOKですが、基本ルールはHTML5になりますので、
HTML5をマスターしてから注目すると分かりやすいですよ！

<picture>要素、srcset属性が正式採用

※IEでは使うことが出来ないので注意

WordPressでは早い段階から組み込まれていたsrcset属性がやっと正式採用になりました。
癖のある属性なので、使いどころは難しいですが、
共通で使えるようになれば、レスポンシブイメージの指定がより楽になりますね！

<picture>
  <source media="(min-width: 45em)" srcset="sample_large.jpg">
  <source media="(min-width: 32em)" srcset="sample_middle.jpg">
  <img src="sample_small.jpg" alt="">
</picture>

<details>要素、<summary>要素が正式採用

<details>要素で追加情報を指定すると、ユーザーが選択できるディスクロージャー・ウィジェット表示となります。
<summary>要素は追加情報の概要などを指定します。
（アコーディオンUIとして使ってはダメ）

<details>
  <summary>実装サンプルはこちら</summary>
  <p>このような表示になります。もちろんブラウザ毎で違います。</p>
</details>

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

かつて、<thead> → <tfoot> → <tbody> の順番で記述することが正式な仕様として定められていた（※1）ことがあり、
僕自身も特に指定がない場合はこのように記述していたのですが、今回から「禁止」になったようです。
記述しながら「んん？？」と思っていたこともあったので、
やっと胸を張って、<thead> → <tbody> → <tfoot> の順番で使えます！

※1
<tfoot>は、<tbody>のレンダリングを待たずに先にユーザに見せるべきであるということから

<header>要素と<footer>要素のネスト（入れ子）が可能に

<header>要素や<footer>要素が、セクショニング要素内に配置されていた場合に限り、ネストすることが可能に！

空の<option>要素がOK

「要素の中には、文書（または画像）」という常識から、フォーム関係は離れたところにありましたが、
こちらも「待ってました！」と声がでる変更ですね。
色々なサイトでも空の<option>要素は見かけていたのですが、グレーゾーンから脱却です。

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

こちらも今まで疑問だった記述仕様でしたね。
人によっては「<img>要素の次に書かないと！」と思っていた方も居たのではないでしょうか。

<img>要素のにwidth属性に値：0を書いてもOK

<img src=”#” width=”0″ alt=””> ってやつですね。
当たり前に考えてこう書く人は居ないと思いますが、テクニック的な使い方では非常に多かった記述。
これも「仕方がない」でOKになったのでしょう･･･。
しかし、僕個人としては、<img>要素にwidth属性やheight属性を使うことはあまり好きではないです。
（見た目の変更はCSS派）

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

<input type=”range”>自体使ってない･･･。
ですが、multiple属性を使っている方は見かけますので、そういった場合は今度から、タグを複数書きましょう。

最後に

今回ご紹介した変更点や追加仕様は、全てではありません！
むしろ半分もご紹介できていません。

調べてもらっても良いですが、公式での発表が正確な情報ですので、惑わされないでくださいね。
ちょっとでも不安でしたら、札幌校を初め、東京校でも名古屋でも、長野でもいいので、聞きにきてください！

ご相談であれば無料体験レッスンでお受けできます。