ホームページの情報をわかりやすく記述するための言語である*HTML（Hyper Text Markup Language）*の初版、いわゆるHTML 1.0が登場したのは、1993年だとされています。それから25年経った今、HTMLのバージョンはとうとう5.2にまで達しています。

特に、HTML5になってからは、これまでの見た目重視のマークアップと決別し、よりセマンティックな（解釈可能な意味を重視した）情報体系を重視しています。

それでは、HTML 5.2では、一体何が変わったのでしょうか？

今回は、新しく勧告された「HTML 5.2」の変更点をご紹介していきます。
　　

HTML 5.2とは？

ballpen_1280x853.jpg

HTML 5.2は、Web技術の標準化団体であるW3Cが勧告した、HTML5のマイナーバージョンアップ版です。

そもそも、この*「HTML5」*とはどのようなものなのでしょうか。

HTML5は、ホームページの記述言語である*HTML（Hyper Text Markup Language）*を大幅に改定したものです。HTML5では、コンピュータが読解可能なだけではなく、人間にも意味があり読解可能なセマンティックな言語になったとともに、最新のマルチメディアに関してもHTMLタグだけで対応できるような言語体系になりました。

HTML5.1でもたくさんの新しいタグや属性が登場しましたが、次のマイナーアップデートであるHTML5.2でも、デザイナーやコーダー、エンジニアが注目すべき新しい新機能が加わっています。

参考：
“地味にスゴい”ってホント!? わかりやすくHTML5.1の追加された新機能を紹介｜ferret
W3C 勧告
　　

HTML5.2の変更点

1. ＜dialog＞要素の追加

HTML5.2では大きなネイティブ要素の変更はありませんでしたが、着目をしたいのが＜dialog＞要素の追加です。

この要素で括られた要素は、モーダルウィンドウのように表示されるようになります。ダイアログボックスは、現在のWebでは広く見られるものではありますが、JavaScriptを使ったりCSSだけで実装したりと、その実装方法は10人いれば10とおりと、定まった方法はありません。しかし、裏を返せば、アクセシビリティの観点ではダイアログの表示部分はセマンティックではないといった問題点も残っていました。

新しく用意された＜dialog＞タグを使うことで、こうした問題は解決されます。Divタグで括ってダイアログを作る以上に、よりセマンティックなHTMLファイルにもなります。使い方は非常にシンプルです。ダイアログで表示したい部分を＜dialog＞タグで括れば完了です。

<dialog>  
　　<h2>警告</h2>
　　<p>このテープは、自動的に消滅する。</p>
</dialog>

デフォルトではダイアログは隠された状態になっているため、ダイアログを表示するにはJavaScriptを使います。2018年1月現在、＜dialog＞属性はすでにGoogle Chromeで使うことができます。
　　

2. ＜main＞要素の複数設置

＜main＞要素は、ある特定のページのメインコンテンツを指し示すために使われるタグです。HTML5.2以前では、この要素は各ページにユニークなコンテンツとして、1回限りの利用が許されていました。

しかし、昨今ではJavaScriptのフレームワークやライブラリを使って、シングルページのアプリケーションを開発することも多くなってきました。

＜main＞要素を複数設置した場合、ブラウザによっては最初に現れた＜main＞要素で括られたコンテンツしか表示しない、といった挙動をするものもありました。

HTML 5.2では、そうした問題を解決するために＜main＞要素を複数設置することができるようになりました。ただし、従来のルールと同じように、最初に表示できるメインコンテンツは1つだけで、他はhidden属性をつけて隠す必要があります。

<main>メインコンテンツです</main>  
<main hidden>ここは非表示１</main>  
<main hidden>ここは非表示２</main>

注意したいのは、このhidden属性もHTMLに対してセマンティックな意味で付けているので、CSS側での非表示は避けるべきだということです。もちろん、CSSのdisplayプロパティをnoneに指定することでも隠すことは原理上可能ですが、hidden属性を使って隠すようにしましょう。
　　

3. ＜legend＞要素のヘッダー表示

＜legend＞要素は、一連のフォーム群を括るためのタグである＜fieldset＞要素の中のキャプション（タイトル）を表す要素です。HTML 5.2以前では、＜legend＞要素の間にはプレインテキストしか指定できませんでしたが、HTML 5.2以降ではヘッダー要素を入れ子で指定することができるようになりました。

<fieldset>  
　　<legend><h3>ご意見欄</h3></legend>
　　<textarea></textarea>
</fieldset>

　　

4. ＜style＞要素の自由配置

これまで、ページ内の要素のスタイリングを行うための＜style＞要素は、HTML文書内の＜header＞内に設置するのが普通でした。しかし、HTML 5.2では、正式に＜body＞内のどこでも設置できるようになりました。

ただし、勧告内の注意書きでは、パフォーマンス上の理由でやはりまだ＜header＞内に書いたほうがいいと言及されています。インラインでスタイルを指定しても、＜style＞タグ以前に出てきた要素にもスタイルが適用されてしまうので、再描画を誘発してしまうからです。
　　

5. ＜iframe＞要素のPayment Request API

W3Cは2017年9月にPayment Request APIを勧告しています。

インターネットでの決済が日常的になっているために、様々な決済フォームに変わり、決済の流れを標準化するために策定されました。

HTML 5.2では、Payment Request APIをインラインフレームで実装できるようになりました。それ以前では、こうした決済はインラインフレームでは行えませんでしたが、Stripeをはじめとした各種サードパーティ製の決済も、画面を遷移せずに行えるようになるということです。

<iframe allowpaymentrequest>

Payment Request APIを利用するには、上記のように「allowpaymentrequest」属性を＜iframe＞要素に付加します。これによって、ページを遷移しないで決済が行えるようブラウザに許可を出すことができます。