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

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

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

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

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

目次

HTML5以前の仕様

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.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.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サイトが主流となる日も遠くはないでしょう。インターネット・アカデミーでは、このような最新の技術も講義の中に組み込んでいます。現場の最前線から得られる情報を学ぶためにも、ぜひ一度無料体験レッスンをお試しください。

参考URL

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

Web業界への就転職・キャリアアップを成功させたいと考えている方へ
日本初そして日本唯一のWeb専門スクールインターネット・アカデミー

自分にぴったりのコースが見つかる

インターネット・アカデミーでは、Web業界を目指すあらゆる方にお応えすべく、多彩なコースをご用意しています。

Webデザインを学びたい方

プログラミングを学びたい方

自分のペースとスタイルで学べる

毎回好きな受講形式を選んで学習することができるので、働きながらじっくり通いたい方も短期間での就職を目指す方も自分の都合に合わせて、スケジュールを組むことができます。

  • ライブ授業

    現役のプロインストラクター
    と仲間と学ぶメリット

    ライブ授業
  • マンツーマン授業

    インストラクターと
    1対1という贅沢

    マンツーマン授業
  • オンデマンド授業

    いつでも学びたいことを
    学べる

    オンデマンド授業

自分に適した学習方法を探す

インターネット・アカデミーでは、無料体験レッスンを毎日開催しています。デザインやプログラミングの体験ができるのはもちろん、実際の授業に参加したり、就職や転職のご相談、通学スケジュールのご相談なども承っております。

  • ご要望をお伺い

    ご要望をお伺い

    まずはお客様のご要望をお伺いし、お一人おひとりの目的や悩みに最適な内容にカスタマイズ。お客様専用の内容で当日ご案内いたします。

  • カウンセリング

    カウンセリング

    就職や転職、在宅で働きたいなど、お客様の希望を叶えるために専任のスタッフが最適な学習プランをご提案。現在の仕事のご相談なども承ります。

  • 体験レッスン

    体験レッスン

    「自分に向いている分野は?」「自分にできる?」そんな疑問を解決するレッスンを無料で体験。デザインもプログラミングもお試しいただけます。

無料体験レッスン・個別相談のご予約

当日ご希望の方やお急ぎの方は、フリーダイヤルにてご予約いただけます。

0120-746-555 フリーダイヤル受付時間(平日・土日) 10時-21時 オンライン予約

IT研修・人材育成のご相談を無料で承っております
法人専用社員研修、内定者・新人研修のご予約

インターネット・アカデミーでは、
あらゆるニーズに合わせた研修カリキュラムを取り揃えています。

「自社に最適な研修プランを相談したい」「研修費用の相談をしたい」「助成金を申請したい」など、お電話またはお問い合わせフォームよりお気軽にご連絡ください。

03-3341-3781 受付時間(平日・土日) 10時-21時 法人専用 お問い合わせフォーム