HTML5.1が2016年9月に勧告！HTML5との仕様の違いや変更点は？

2014年に勧告されたHTML5、そのマイナーアップデートバージョンとして2016年9月に勧告される「HTML5.1」はHTML5に機能拡張が施され、要素や属性の追加や変更が実施されます。

従来のHTMLの仕様や役割が、HTML5.1ではどのように変更され、Web業界にどのような影響を与えるのでしょうか。今回はHTML5.1の仕様の違いや変更点についてご紹介します。

IT業界まるわかりガイドは、日本初Web専門スクールのインターネット・アカデミーが運営する業界情報メディアです。最新の業界情報を、初心者にも分かりやすくご紹介しています。

HTML5以前の仕様

Webページの論理構造を示し、見出しや段落など現在では当たり前となったデザインを実現すべく、1990年代に提唱されたのがHTMLの始まりとされます。幾多のバージョンアップを経て現在のHTML5になり、まもなくHTML5.1が勧告されます。

どんどん進化を遂げていくマークアップ言語「HTML」。これまでのバージョンアップの中でも大きな変更があったのは、HTML2.0とHTML4.0へのバージョンアップのときです。

HTML2.0ではHTMLタグを使ってマークアップすることで論理構造の記述が可能に、HTML4.0ではCSSを使用することで視覚的なデザインの記述を分離できるようになり、Webの世界に大きなインパクトを与えました。

そしてHTML4.01からHTML5になったことでヘッダーやフッターのような文書構造専用のタグが設けられ、よりシンプルに文書構造を示せるようになりました。

その他にもフォーム機能の充実や動画・音声データの取り扱いがより簡易になり、APIの追加も実施されるなど機能面の充実が図られたことがHTML5の特徴です。

HTML5.1に追加された要素や変更点

HTML5.1は、HTML5のマイナーバージョンアップデートとなるため、大きな変化を伴うほどではありませんが、広範にわたる仕様の追加や変更が行われます。主な変更点は要素、属性、DOM定義などとされており、HTML5で定義しきれなかった部分の仕様変更となるようです。

追加された機能の中で最も注目度が高いのは、レスポンシブWebデザインを簡単に実現できる「picture要素」です。

従来はPCやスマートフォン、タブレットなど各端末用のWebページを用意し、ユーザー環境に合わせて表示ページを変えていましたが、最近では1つのWebページを用意して表示方法を変える「レスポンシブWebデザイン」が主流となっています。

例えば、PCには大きい画像、スマートフォンには小さい画像を表示させたい場合、画像を埋め込む「img要素」を使用すると表示画像の切り替えが面倒ですが、メディアリソースを指定する「source要素」をpicture要素に複数持たせるだけで、端末に応じた画像を表示させることができます。

使用イメージ

<picture>
<source srcset="logo.svg" type="image/svg+xml">
<img src="logo.png" alt="Internet Academy">
</picture>

さらに、Webページ上に表示項目を整列させて表示するときに役立つtable要素のソート（整列）機能の実装も予定されています。このソート機能は、tableタグにsortable属性を指定することで実現することができます。この機能が実装されることにより、jQueryプラグインのDataTablesなどを使用せずに済むため、制作の手間が軽くなります。

使用イメージ

<table sortable="sortable">
<tr>
<th sorted="1">見出し1</th>
<th sorted="2">見出し2</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</table>

HTML5.1が与える影響

HTML5よりさらに機能充実を図るべく勧告されたHTML5.1は、要素や属性を始めとしたWeb制作に携わる人がより手軽に機能を実装できるような改良が狙いとされており、今までCSSやJavaScriptに依存していたような機能実装のいくつかはHTMLで可能になる見通しです。

より安定したWeb制作を行うためにも、Web制作に携わる人はHTML5.1の仕様チェックが必須です。また、HTML5.1によってWebブラウザの機能的な欠陥を補う作業も進められています。近い将来、新しい機能が使えるようになったHTML5.1の仕様を実装したWebサイトが増えるでしょう。

HTMLは、今後もこのようなマイナーバージョンアップデートを繰り返していく予定となっており、HTML5.2やHTML5.3とバージョンが上がることによって、より充実した機能実装が目標とされています。

おわりに

Webサイト制作に欠かせないHTML、CSS、JavaScript。HTML4からHTML5にバージョンアップすることで実装できる機能の幅が広がりました。シンプルな文書構造やコンテンツの充実などが可能になったHTML5.1では、CSSやjQueryに頼ることなく目的とする機能を実現することができます。

Webサイトを取り巻く環境も多様化し、今ではさまざまなデバイスからの閲覧ができるようになったことから、レスポンシブ化が主流となりました。新しく追加された要素ではこのような対応も容易になるため、制作現場の負担も軽くなることが期待されます。今後はHTML5.1で制作されるWebサイトが主流となる日も遠くはないでしょう。インターネット・アカデミーでは、このような最新の技術も講義の中に組み込んでいます。現場の最前線から得られる情報を学ぶためにも、ぜひ一度無料体験レッスンをお試しください。

最短2週間でIT・Webスキルを身に付けるWeb専門スクール！フリータイム制で好きな時間に学べる

「IT人材が社内に足りない！」「助成金って使える？」企業研修に関する疑問を解決

参考URL

W3C公式サイト：HTML 5.1 Web Creative Park：HTMLリファレンス Mozilla Developer Network：<table>