HTML最新の動向はどこをチェックすべき？仕様変更で泣かないために抑えておくべきポイント
HTMLの最新情報はどこで取得すればよいのでしょうか。CSSであればMDN WebDocsかと思いますが、HTMLの情報はどこから取得すればよいのか不明でした。今回の記事では、HTMLとはなにかというところから、HTML LivingStandardとは何かというところまで解説していきます。
この記事を最後まで読むことでHTMLの仕様変更で痛い目を見ることはなくなるでしょう。
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
HTMLとは
HTML（HyperText Markup Language）とは、今現在見ているWEBページを作成するために開発された言語になります。プログラミングを学ぶ場合、最初に覚える言語がHTMLとCSSではないでしょうか。HTMLでできることとしては、 HyperText Markup Language という言葉の通り、ハイパーテキストに目印をつけることができます。
ハイパーテキストとは、ハイパーリンクを埋め込むことのできるテキストになり、他のページへ移動するリンクを埋め込んだり、ページ内に画像などのファイルデータを挿入することもできるとても高機能なテキストになります。
例えば、以下のようなコードは「Google」をクリックすることで https://www.google.com にアクセスすることができます。
<a href="https://www.google.com">Google</a>
さらにGoogleのテキスト部分に画像要素を埋め込むと、画像をクリックすることで、Googleのサイトに移動させることができます。
<a href="https://www.google.com">
<img src="任意の画像.jpg" alt="">
</a>このように、ハイパーリンクとは別ページへ遷移するためのリンクになります。ExcelやPowerPointなどのOffice製品にもハイパーリンク機能はついているので、Offise製品を使っている方は馴染みやすいと思います。
つまりHTMLとは、ハイパーリンク機能で関連する情報同士を結び付けて、紐づけてくれるという特徴があります。
また、HTMLはマークアップ言語と呼ばれていることからもわかるように、目印をつけることに特化した言語です。例えば画像を入れたければ「img要素」を使いますし、表を作りたければ「table要素」を使います。このように文書内のハイパーテキストが担っている役割が何かわかるように人にもコンピューターにも判別しやすいようにマークアップしています。
言い換えれば、他の人が見やすいHTMLを組めると、コンピューター側も見やすくなり、SEO検索で上位表示することも可能になります。
HTML５は廃止？
2021年1月28日にW3Cという機関が定めたHTMLの勧告であるHTML５が廃止になったことはご存じでしょうか。廃止と聞くとHTMLという言語が使えなくなるのでは？と思うかもしれませんが、そんなことはありません。W3Cが勧告したHTMLの規格が廃止になったということです。
例えるならMicrosoftのIE（Internet Explorer）は2022年6月にサービスが終了しますが、他のブラウザ（edge、Chrome、FireFox）を使うことでインターネットの閲覧は可能ですよね。HTMLでも同じように、HTML５は廃止になりましたが、WHATWGの「LivingStandard」の仕様策定プロセスで作成されるHTMLを使用することができます。要は今まで通りHTMLというマークアップ言語は使えるよということです。
変更されたのは規格であり、HTMLがいますぐ使えなくなるので、何か別の言語に乗り換えなさいということではありません。
さて、ここまでの説明でW3CやWHATWGという団体名が出てきたので捕捉します。
W3Cとは
W３Cとは「World Wide Web Consortium」の略称で、Web技術の標準化を行う非営利団体の名称です。W3Cはティム・バーナーズ＝リーによって1994年に創設され、Webで使用される技術を標準化し、よりスムーズな開発や品質向上を目標に活動が続けられています。
W3Cは今や世界中に支部を設立し、1996年9月より、日本の慶應義塾大学SFC研究所が日本支部および東アジア地区での活動を担うこととなりました。SFC研究所は、アメリカのマサチューセッツ工科大学計算機科学人工知能研究所（MIT CSAIL）、フランスに本部を置く欧州情報処理数学研究コンソーシアム（ERCIM）、中国の北京航空航天大学（Beihang University）とともに、W3Cの管理運営の中心的役割を担っています。
WHATWGとは
WHATWGとは、Webの発展に興味を持つ人たちにより結成された、HTMLとWebアプリケーションに必要なAPIの開発に取り組んでいる非営利団体の名称になります。
2004年、既存団体であるW3C（World Wide Web Consortium）が考えているXHTMLについての方向性、Webサイト構築現場のニーズへの対応に対して不満を表明した、Apple、Mozilla、Operaに所属するメンバーにより立ち上げられた。WHATWGには誰でも費用なしで参加することができる。
HTMLの歴史
HTMLを策定している非営利団体の特色としては
HTMLはスイス・ジュネーブにある欧州原子核研究機構（通称：CERN）においてイギリスの計算機科学者であるティム・バーナーズ・リー氏を中心に1989年に開発されました。ティム・バーナーズ・リー氏はロバート・カイリュー氏と共にWWW（ワールド・ワイド・ウェブ）を考案したことでも有名です。
Webページを作成するにあたってHTMLと合わせて使用されるCSSが誕生したのは1996年の頃です。CSSの登場によってHTMLでは実現出来ないより高度な装飾が実現出来るようになりました。その後、HTMLも年々バージョンアップを重ねていき、2020年現在はHTML5.2が最新バージョンとなっております。
HTMLを理解する！初心者でも分かる歴史、できること、基礎知識などを簡単に解説！
【年表】
| 年代 | バージョン | 備考 |
| 1989年 | HTML | 欧州原子核研究機構（通称：CERN） ティム・バーナーズ・リー氏が設計 |
| 1993年6月 | HTML1.0 / HTML+ | 最初のアップデート 同年に上位互換バージョン(+)もリリース |
| 1995年11月 | HTML2.0 | HTML 2.0 は RFC 2854 によって廃止 HTML は IETF ではなく W3C が管理 |
| 1997年1月 | HTML3.0 / HTML3.2 | 3.0の規格化がまとまらず3.2が別物としてリリース |
| 1999年12月 | HTML4.0 / HTML4.01 | Visual Studio 2012 と共に2012年にリリース |
| 2007年 | HTML5.0 | W3Cもワーキンググループを設立し、WHATWGと共同での開発開始 |
| 2012年7月 | W3CとWHATWGは個別で作業することになる WHATWGの仕様策定はHTML Living Standardとして継続 | |
| 2016年 | HTML5.1 | マイナーバージョンアップデート（大きな変化無し） |
| 2017年 | HTML5.2 | マイナーバージョンアップデート（2020年時点最新版） |
| 2021年 | HTML Living Standard | WHATWGが規格策定をすることになる |
1995年にW3Cが管理するようになり、アップデートを繰り返して行きましたが、Web開発者への配慮が足りないと不満を持った各社が結束し、Apple、Mozilla、Operaの開発者たちによって2004年にWHATWGという団体が結成されました。このWHATWGという団体が独自に策定を進めているHTMLの仕様が「HTML Living Standard」になります。
W3CとWHATWGの間の考え方の違いとして、以下の違いが挙げられます。
- W3C：ドキュメントを整備してから発行したい
- WHATWG：不具合があれば順次アップデートしていきたい
マニュアルをしっかりと作った上でアップデートをしたいW3Cは保守的で慎重なイメージがありますが、その分レスポンスが遅くなります。反対に、順次アップデートを行うWHATWGは対応が早いがドキュメント整備に少し不安といったところでしょうか。
プログラミング開発に例えていうと、「ウォーターフォール型開発」と「アジャイル型開発」のような違いですね。昨今ではどっしり構えるウォーターフォール開発よりも仕様変更に柔軟に対応できるアジャイル開発の方が主流になってきています。
WHATWGの考え方はそのような世間の流れにも合致しているといえます。
HTML５廃止による影響
結論から言うと、HTML5がHTML Living Standardに変わったとしても特に影響はありません。現に私は、HTML５が廃止になったと気付かず3ヶ月ほどコード修正作業を行なっていました。もっとIT業界の動向にアンテナを貼らないといけないと思いつつも日々の業務に追われるといった言い訳をしております（反省）
とはいえ、HTML Living Standardになることによって、「廃止・追加・変更」されるものはあるので、自分でhtmlやcssを作る人は念のため仕様書の確認をした方がよいでしょう。次の項目でHTML５との比較を検証していきます。
HTML LivingStandardとは
HTML５との比較
「HTML Living Standard」は基本的には「HTML5」から呼び方が変わっただけなので、コードの書き方などに大きく異なる点はありません。しかし、新しい機能が追加されたことによっていくつかの要素や属性は細かな違いがあり、HTML5/5.1/5.2では定義されていなかった要素や属性も多く追加されています。
また、HTML Living Standardを策定しているWHATWGは順次アップデートしていくタイプの団体なので、現在も更新され続けていますので、この記事の内容が必ずしも最新とは限りません。適宜仕様書を見直していくことをオススメします。
追加要素
HTML5.2では定義されていませんが、HTML Living standardでは定義されています。
| 要素 | 使用用途 |
| <hgroup> | 見出しのグループ化 |
| <slot> | スロット |
変更された要素
headタグ内でよく使うlinkやmeta要素の仕様が変更されています。また、style要素がbody要素内に配置できなくなっているので注意しましょう。
| 要素 | 用途 |
|---|---|
| <cite> | 創作物のタイトル以外を含むことはできず、作者名を含めることはできなくなりました |
| <link> | rel 属性の値が body-ok な値のみである場合、もしくは itemprop 属性が指定されている場合は body 要素内に配置できます |
| <meta> | itemprop 属性を指定した場合は body 要素内に配置できます |
| <style> | body 要素内には配置できません |
廃止された要素
あまり使うことのない要素なので、知っている方は少ないかもしれませんが、以下の要素はHTML Living standardでは廃止されました。
| 要素 | 用途 |
|---|---|
| <rb> | 操作メニューの項目を表す |
| <rtc> | 操作メニューの項目を表す |
追加された属性
HTML５では定義されておらず、HTML Living standardから定義された要素になります。
| 要素 | 属性 | 用途 |
| <a> | ping=”” | pingの送信先を指定できる |
| <area> | ping=”” | pingの送信先を指定できる |
| <body> | onmessageerror=”” | 文書がAPIから解読できないメッセージ受信した際に実行するスクリプト。 |
| <form> | rel=”” | 現在の文書から見たリンク先との関係。 |
| <iframe> | allow=”” | 利用できるブラウザの機能を指定できる |
| <img> | decoding=”” | 画像のデコード方式を指定できる |
| <img> | loading=”” | 画像の読み込みのタイミングを指定できる |
| <link> | as=”” | 先行して読み込む外部リソースの利用先を指定できる |
| <link> | color=”” | Safariのページピンアイコンの色を指定できる |
| <link> | disabled=”” | 外部スタイルシートへのリンクを無効化できる |
| <link> | imagesizes=”” | 画像の表示するサイズ。 |
| <link> | imagesrcset=”” | 使用可能な画像ファイルのセット。 |
| <link> | integrity=”” | 外部リソースの整合性を確認できる |
| <script> | integrity=”” | 外部スクリプトの整合性を確認できる |
| <script> | nomodule=”” | モジュールスクリプトへの対応環境でスクリプトを無効化できる |
| <script> | referrerpolicy=”” | リファラーポリシーを指定できる |
| <video> | playsinline=”” | インラインで再生できる |
また、以下の属性はHTMLで一度廃止されましたが、HTML Living standardで追加された要素になります。
| 要素 | 属性 | 用途 |
|---|---|---|
| <object> | usemap=”” | クライアントサイドイメージマップとの関連付け |
追加されたグローバル属性
以下のグローバル属性は「HTML Living standard」で追加されました。
グローバル属性とは、標準仕様で未定義の要素を含む すべての HTML 要素で指定することができます。つまり、その要素を使用することで文書が HTML5 に準拠しなくなるような標準外の要素であっても、これらの属性は受け入れなければなりません。
MDN Web Docs
例えば、要素にクラスを割り当てるclassや固有idを割り当てるid、スタイルシートを要素に直接指定するためのstyleなどがグローバル要素になります。
| 属性 | 説明 |
| autocapitalize=”” | 先頭の文字を大文字化するかを指定します。 |
| enterkeyhint=”” | ソフトウェアキーボードの[Enter]キーのアイコンを指定します。 |
| is=”” | カスタム要素と関連付けます。 |
| itemid=”” | 要素の内容のマイクロデータのグローバルな識別子を示します。 |
| itemprop=”” | 要素の内容のマイクロデータのプロパティ名を指定します。 |
| itemref=”” | 要素の外にあるマイクロデータと関連付けます。 |
| itemscope=”” | 要素の内容にマイクロデータが含まれることを示します。 |
| itemtype=”” | 要素の内容のマイクロデータのプロパティ名の定義を示します。 |
| slot=”” | スロットと関連付けます。 |
変更されたグローバル属性
フォームを作るときによく使うグローバル属性が変更されているので、チェックしておきましょう。
| 属性 | 説明 |
| autofocus=”” | 自動フォーカスの可否を指定します。 |
| inputmode=”” | 入力する時のソフトウェアキーボードの種類を指定します。 |
| nonce=”” | “Content Security Policy”のワンタイムトークンを指定します。 |
まとめ
W3CとWHATWGの関係性を紐解くことで、今回のHTML５が廃止されHTML Living Standardに変わった理由が分かったのではないでしょうか。そもそもIT業界は日進月歩な業界と言われています。最新の情報を絶えずチェックしておかないと、あっという間に取り残されてしまうので、私も含め、IT業界の最新情報を取得する努力をしていきましょう。
一つ注意点ですが、もしこれからWEB制作を学びたいと思っている方は、クチコミの多い参考書よりも最新の参考書を購入するようにしましょう。クチコミが多く、評価の高い参考書は情報が古い場合が多いので、Amazonで評価が高いからといって飛びつかないようにしましょう。
ここまで読んでいただき、ありがとうございました。
