<picture>タグで画像を切り替える

今までJavaScriptやCSSでしか行えなかった画像の切り替えですが、<picture>の記述のみで可能になりました。例として以下の画像を用意してみました。

ウインドウサイズを狭めていき、1000px以下になった時に自動的に画像が切り替わっているのが確認できると思います。そして、これがそのために必要なソースです。

<picture>
<source media="(min-width: 1000px;)" srcset="min1000.jpg">
<img src="max999.jpg">
</picture>

たったこれだけのマークアップです！
PCサイズとSPサイズで表示する画像を切り替えるケースは頻繁に存在すると思いますが<picture>タグを使用すると、それらの作業が格段に短縮できます。

<details>タグと<summary>タグで詳細情報を開閉式に

<details>タグと<summary>タグを使用するだけで、アコーディオンメニューの様に詳細情報を収納することができます。実際に作成してみました。

ナビメニューにある天気予報は当たりますか？

Livedoorの天気予報データを呼び出しています。当たるかと聞かれると、わかりません。
天気予報とはそういうものです。

JSやJQueryを使用せずに、こんなメニューが作れました。こちらもマークアップはたったこれだけです。

<details>
<summary>ナビメニューにある天気予報は当たりますか？</summary>
<p>Livedoorの天気予報データを呼び出しています。当たるかと聞かれると、わかりません。</p>
<p>天気予報とはそういうものです。</p>
</details>

シンプルなソースでマークアップできるだけでなく詳細表示時には<details>にopen属性も付与してくれるので、CSSでスタイルも付けやすいと思います！
ちなみに、デフォルトで付いている矢印マークは『list-style-type:none;』で消すことができます。

まとめ

今回紹介した2つもHTML5.1の新機能の中でもごくごく一部に過ぎません。
HTML5からの変更点は下記の記載にまとめられています。
HTML 5.1: Changes – W3C

各要素の現在のブラウザ対応状況を調べることのできるサイトもあるので、HTML5.1の要素を使用する場合は参考にしてみてください。
HTML 5.1 Implementation report – W3C
Can I use… Support tables for HTML5, CSS3, etc

現時点ではまだ制作ベースでHTML5.1で追加されたタグをガンガン使っていくというのは難しい状態です。
しかし今後主要ブラウザで使うことができるようになれば、制作時間や手間が格段に省けるようになると思います。
しかし現在、すでに次のHTML5.2の勧告に向けて、草案も出されています。
今後のアップデートに期待していきましょう！