超現場ブログ

Technique,Design and Events

知ってるよね?HTML5.1の仕様変更はフロントエンジニアの常識

Twitter Facebook Google+ はてブ

html51

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

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

html 5.1
HTML 5.1 W3C Recommendation, 1 November 2016

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

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

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

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

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

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

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

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

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

 

実装サンプルはこちら

このような表示になります。もちろんブラウザ毎で違います。

 

<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属性を使っている方は見かけますので、そういった場合は今度から、タグを複数書きましょう。

最後に

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

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

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

まずは無料の体験レッスン・カウンセリングへ!

あなたの目的や目標をお伺いしたうえで、
現在のスキルを分析し、
あなたに最適なカリキュラムをご提案します。

体験レッスン・カウンセリングの流れ

ご質問・ご相談の方はこちら

ご質問・ご相談ですか?

どんなことでもお気軽にご相談ください。

ご質問・ご相談はこちら

Copyright © 超現場主義 All rights reserved.