HTML5とHTML Living Standardとの違いとは?学習方法や資格も解説

公開日:2021.07.30

スキルアップ
 

HTML5は、W3Cという機関が定めたHTMLの勧告のことですが、2021年1月28日に廃止されました。Webエンジニアにとっては、すでに知られたニュースです。しかし、IT業界以外の人の中には、初めて知ったという人もいるのではないでしょうか。

そこで今回は、現在有効なHTML5が廃止された経緯とHTML Living standardとの違い、今後のHTMLにおける勉強方法について解説します。

HTML5廃止の経緯

HTML5は、なぜ廃止に至ったのでしょうか。廃止された理由を理解するには、HTML Living Standardを定めたWHATWGという機関を知る必要があります。

なお、HTMLの基礎から知りたいという方は、以下の記事も併せてご覧ください。

関連記事:HTMLとは?CSSとの違いや代表的なタグも紹介

W3CとWHATWG

W3C(World Wide Web Consortium)は、World Wide Webの標準仕様を策定している国際的な機関です。HTML5の最終ドラフトは2011年に定まり、HTML4と大きく変化した仕様は、日本でも大きなニュースとなり「次世代のHTML」として取り上げられていました。

しかし、W3Cが現場の要望を無視しているという不満から、Apple・Mozilla・Operaによって2004年にWHATWGが設立。Webブラウザを開発している各社は、独自の機能をWebブラウザに組み込むなど、HTMLの改善を要求してきました。その結果、生まれたのがHTML5です。

HTML5からHTML Living Standardへ

2012年にHTMLの仕様は2種類に分裂し、混乱の時代が続きました。しかし、2019年に解決に向けての動きが起こります。HTML Living StandardをHTMLとDOMの標準にすることとなり、2021年1月にW3CがHTML Living Standardを正式な勧告として発表。HTMLT5は、廃止となりました。

HTML5およびHTML Living Standardに対応しているWebブラウザ

主要なWebブラウザは、HTML 5.1の勧告があった2016年ごろから、HTMLの標準仕様をHTMTL5からHTML Living standardへと切り替え始めました。そんな中で、Microsoft の EdgeだけはHTMTL5に準拠していましたが、2018年12月にChromium ベースに移行することを決定。

2021年現在、主要なWebブラウザはすべてHTML Living standardに準拠しています。

HTML5.2とHTML Living standardの違い

HTML5とHTML Living standardは、まったくの別物というわけではありません。ここでは、HTML5の最終版であるHTMTL5.2とHTML Living standardの違いについて確認していきましょう。

  • HTML Living standardは、日々更新されているため、細かな違いについては都度仕様書を確認することが必要です。

追加・変更・廃止された要素

【HTML Living standardで追加された要素】

要素名 用途
<hgroup> 見出しのグループ化
<slot> スロット

【HTML Living standardで変更された要素】

要素名 用途
<cite> 作者名を含めることはできなくなった
<link> “body”要素内に配置できる条件に変更有あり
<meta> “body”要素内に配置できる条件に変更有あり
<style> “body”要素内に配置できなくなった

【HTML Living standardで廃止された要素】

要素名 用途
<rb> 操作メニューの項目
<rtc> 操作メニューの項目

追加・変更・廃止された属性

【HTML Living standardで追加された属性】

カテゴリ 属性
属性 <a> ping=""
<area> ping=""
<body> onmessageerror=""
<form> rel=""
<iframe> allow=""
<img> decoding=""、loading=""
<link> as=""、color=""、disabled=""、imagesizes=""、imagesrcset=""、integrity=""
<script> integrity=""、nomodule=""、referrerpolicy=""
<video> playsinline=""
<object> usemap=""
グローバル属性 autocapitalize=""
enterkeyhint=""
is=""
itemid=""
itemprop=""
itemref=""
itemscope=""
itemtype=""
slot=""
autofocus=""
inputmode=""
nonce=""
イベントハンドラ属性 onformdata=""
onmessageerror=""
onsecuritypolicyviolation=""
onslotchange=""
onwebkitanimationend=""
onwebkitanimationinteration=""
onwebkitanimationstart=""
onwebkittransitionend=""

【HTML Living standardで変更された属性】

カテゴリ 属性
属性 <a> rel=""
<area> rel=""
<iframe> sandbox=""
<link> rel=""
<meta> charset=""
http-equiv=""
name=""
グローバル属性 accesskey=""

【HTML Living standardで廃止された属性】

カテゴリ 属性
属性 <a> rev=""
<area> hreflang=""、type=""
<iframe> allowpaymentrequest=""
<img> longdesc=""
<link> rev=""
<object> typemustmatch=""
<script> charset=""
<style> type=""
<table> border=""
イベントハンドラ属性 ondragexit=""
onloadend=""
onshow=""

これからHTML5の学習を始める意義と注意点

ここまで見てきた通り、HTML5は廃止された標準仕様です。では、これからHTMLを学ぶのは無駄になってしまうのでしょうか。結論からいえば、HTML Living standardはHTML5をベースとしているため、HTML5の学習は、HTML Living standardの学習にも役立ちます。

学習方法や資格も、2021年時点ではHTML5関連のほうが充実しているため、HTML5の学習を基本として進めた後、HTML Living standardとの違いを学ぶ方法がおすすめです。

HTML5の学習方法

初心者がHTML5を学習するための具体的な方法を紹介します。

Webサイトの構造について学ぶ

HTML5を学ぶ前に、Webサイトの構造について学びます。具体的には、以下のような内容です。

  • なぜWebサイトは動くのか
  • HTML5で何ができるのか
  • どんなときにプログラミングが必要なのか

これらの知識を体系的に学べる書籍や学習サイトを利用しましょう。

HTML5の書き方を学ぶ

HTMLの役割を把握した後、HTML5の書き方を学びます。最初は、シンプルな構造のHTMLファイルを見たほうが理解しやすい傾向です。そのため、HTML5の学習用書籍や初心者向けのHML5用学習サイトを見ながら、HTMLファイルの基本的な構造と書き方を学んでいきます。

AKKODiS(派遣・紹介予定派遣)別ウィンドウで開くが提供する研修プログラム、AKKODiS Academy別ウィンドウで開くでは、ホームページ制作の講座として、HTML5やCSS3の講座も用意しています。受講を認められれば無料で受講できるため、興味のある方はぜひお申し込みください。

HTML5とHTML Living standardの違いを学ぶ

HTML5の書き方を一通り学んだ後は、HTML Living standardとの違いを確認しましょう。
自分でWebサイトを参考にしてHTMLのコードを書く場合、両者の違いを把握していれば、HTML5で勉強してきた書き方との違いを見たとき、戸惑わずに済みます。

Webサイトをトレースする

基礎的なHTML5が書けるようになったら、実在するWebサイトを見ながら、その動きを再現するよう自分で1からコードを書きます。「何の要素や属性を使っているのか」について調べながらコードを書いていくことで、実力がついていくでしょう。具体的なサイトのトレース方法については、インターネットで情報収集しながら進めます。

自分のWebサイトを制作する

他のWebサイトをトレースして学んでいくことで、Webサイトの構成が身につき、自分のWebサイトを構築できるまでの実力がつきます。さまざまなWebサイトを1から制作する経験を積み重ね、さまざまなパターンや、最新のデザインなどを学びましょう。

サイト構築の案件に挑戦する

自分の実力に自信がついてきたら、Webサイト構築案件への調整も視野に入ってきます。ただし、初心者が「独学でWebサイトの構築を学びました」というだけでは、自分の実力を客観的に示すことは難しいでしょう。

そのため、案件へ応募する前に、「HTML5プロフェッショナル認定試験」「Webクリエイター能力認定試験」といった資格を取得しておくことがおすすめです。

HTML5の学習に役立つ資格

HTML5の学習に役立つ資格として、HTML5プロフェッショナル認定試験別ウィンドウで開くWebクリエイター能力認定試験別ウィンドウで開くの2資格を紹介します。いずれもHTML5の試験であり、2021年時点でHTML Living standardの試験ではありません。

しかし、初心者がHTMLやWebサイト作成の学習効果を測定するのに適した試験となっているため、取得を目指して勉強することをおすすめします。

HTML5プロフェッショナル認定試験

特定非営利活動法人エルピーアイジャパン(LPI-Japan)別ウィンドウで開くが、最新のHTML5、CSS3などの技術力を認定する試験です。認定試験は、「Level.1」「Level.2」の2段階。Level.1ではWebコンテンツ制作の基礎力を測り、Level.2では最新の技術や動的コンテンツの設計・開発能力を測ります。

独学でHTML5の学習を進めている初心者は、まずLevel.1の取得を目指して受験し、自分の実力を確認するといいでしょう。

Webクリエイター能力認定試験

Webクリエイター能力認定試験とは、サーティファイの組織するWeb利用・技術認定委員会別ウィンドウで開く主催の資格試験です。Webサイトのデザイン・コーディングの力を認定するため、実技に力点を置いた試験内容となっています。

資格の種類は、「スタンダード」「エキスパート」の2種類です。スタンダードは実技試験、エキスパートは実技試験と知識試験で構成されています。

HTML5を学んでホームページ制作に活かそう

標準仕様としてのHTML5は、その役割を終えました。しかし、今後の標準仕様となるHTML Living standardの前提知識として、HTML5の学習は依然として有効です。インターネットの学習サイトや書籍を活用して独学で学ぶか、オンライン講座でHTML5を学び、資格取得することで、HTML5でのホームページ制作の案件獲得の道が開けます。

HTML5でのホームページ制作案件をお探しの場合は、AKKODiS(派遣・紹介予定派遣)で派遣エンジニアの案件を検索・応募別ウィンドウで開くしてみてはいかがでしょうか。

(2021年7月現在)

AKKODiSコンサルティングに関するお問い合わせ