大変ご無沙汰しております。
マークアップエンジニアの草野です。
2016年11月1日、W3CからHTML5.1が「勧告」されましたが、ご存知でしょうか？
HTML5.1はもともと2014年のHTML5勧告に間に合わなかったものをカバーした
マイナーチェンジ版ですので、基本的にはHTML5と全体的に大きく違うものではありません。
HTML5とHTML5.1で何が変わったのか、その全貌はこちらの差分一覧（英語です）から確認することができます。
今日はこの中からマークアップ分野に特に気になったものを２つ紹介したいと思います。
①picture要素とsrcset属性の追加
HTML5.1におけるマークアップ分野での目玉は何と言ってもpicture要素とsrcset属性の追加でしょう。
これらは「レスポンシブイメージ」と呼ばれるもので、これまでは複雑なCSSやJavascriptの力を借りても完全に対応することが困難だった「画面サイズや解像度に応じて必要な画像をブラウザ側で判定して選択的に表示」することができる新しい要素・属性です。
srcset属性
srcset属性はいわゆる「Retinaディスプレイ対応」のように、デバイスピクセル比や
画面サイズに応じて高解像度画像と低解像度画像を使い分ける用途で用いるものになります。
<img src="photo.jpg" srcset="photo@2x.jpg 2x" width="100" height="100" alt="">
例えばこのように記述すれば、デバイスピクセル比が2の環境であれば自動的に
photo@2x.jpgの方が表示され、それ以外の環境ではphoto.jpgの方が表示されるようになります。
picture要素
picture要素は例えば「大画面環境では横に長い比率のメインビジュアルを表示し、
スマホ環境では縦に長い比率のメインビジュアルを表示する」などのように、
画面サイズなどに応じてサイズ・解像度・アスペクト比・トリミング位置などが
異なる複数の画像を使い分けられるようにすることができる要素です。
<picture> <source media="(min-width: 960px)" srcset="large.jpg"> <source media="(min-width: 640px)" srcset="medium.jpg"> <img src="small.jpg" alt=""> </picture>
このように、主にmedia属性で画面サイズを指定して表示したい画像を
動的に切り替える用途で用いられることが多くなります。
【参考サイト】
◎『レスポンシブイメージで画像の表示を最適化 〜CSSもJSもいらないHTML 5.1の新機能』
◎picture要素のサポート状況
◎srcset属性のサポート状況
②セクション要素内での見出しレベル仕様の変更
2014年勧告のHTML5では、「セクショニング・コンテンツの入れ子によって
正しく階層構造がマークアップされている場合、その中で使用される見出しレベルは問わない」
という仕様がありましたが、この仕様が削除されました。
先述のHTML5-5.1差分一覧の、「削除された仕様」に次の項目があります。
・The use of nested section elements each with an h1 to create an outline.
（アウトラインを生成するためにそれぞれh1を持つネストされたセクションを使用すること）
つまり、これからは
セクション要素内で使用する見出しレベルはセクションの入れ子階層に応じて適切に設定する必要
があるということになります。
【参考サイト】
◎W3C仕様 Headings and sections
◎【HTML5.1勧告】セクション要素内見出しレベル仕様の変更について
以上2点が個人的に特に注目したい変更点になります。
API関連や、その他細かい追加・削除・変更項目等もありますので、念のため差分一覧にも目を通しておくと良いでしょう。
