HTML 5.2がリリース。5.1からの変更点をチェック

ブログ

Blog
  1. ホームページ制作・運営はアウラ:ホーム
  2. ブログ
  3. HTML 5.2がリリース。5.1からの変更点をチェック

HTML 5.2がリリース。5.1からの変更点をチェック

HTML 5.2がリリース。5.1からの変更点をチェック

こんにちは、アウラスタッフの仁木です!
2018年もアウラでたくさんのサイトを出来るように楽しく頑張っていきたいと思います。よろしくお願いします!

 

HTML5の新訂版 「HTML5.2」

昨年12月にHTMLの5.2がリリースされました。
2016年11月にHTML5.1がリリースされ、その1年後にリリースでありHTML5になってからは2回目の改訂です。

 

変更された部分

具体的にどの部分が追加され削除されたのか、確認したいと思います。これが全てではないのと、私個人の解釈なので間違った部分があるかもしれませんがご容赦ください。

5.1からの変更点は5.2の勧告に記載されています。
HTML 5.2|W3C Recommendation, 14 December 2017

 

<body>タグ内に<style>タグが記述可能に

今まで<head>内のみで記述できていた<style>タグが<body>タグ内で記述できるようになりました。

 

<dl>タグ内に<div>タグが記述可能に

今まで<dl>タグ直下は<dt>もしくは<dd>タグのみ書くことができましたが、<div>タグも新たに記述することができるようになりました。
割と<dl>タグ内に空要素を入れたいと思うことは多いので、これはちょっと嬉しいです。<ul>や<ol>も今後可能になるのか気になります。

 

<dialog>タグの追加

<dialog>タグはダイアログ機能を持った要素です。以前から導入が検討されていた要素ですが、5.2から正式に追加されたみたいです。

JavaScriptでshow(),close(),showModal()のメソッドを利用して簡単にダイアログの表示・非表示の制御ができます。
ただし実装可能なブラウザは現在はChromeとOperaくらい。今後の各ブラウザの対応が気になります。

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”LedXLo” default_tab=”result” user=”toshitaka”]See the Pen <a href=’https://codepen.io/toshitaka/pen/LedXLo/’>LedXLo</a> by Toshitaka Niki (<a href=’https://codepen.io/toshitaka’>@toshitaka</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

 

<link>タグの”rel”属性に”canonical”の値が追加

canonicalは同一内容のページであることを示す値です。今まで普通に使っていましたが、5.2から正式に追加されるんですね。

 

<link>タグの”rel”属性に”noreferrer”の値が追加

 

<link>タグの”rel”属性に”apple-touch-icon”の値が追加

こちらもファビコンまわりの設定で今まで使っていましたが、5.2から正式に追加。

 

Referrer Policy属性の追加

<a>、<area>、<iframe>、<img>、<link>タグに対してリファラー情報を送るかどうかを指定できるようになりました。
指定できる内容は以下です。

“”

空値。リファラーポリシーがない。その他でポリシーが定義されている場合はそれに準じるものになります。

“no-referrer”

リファラー情報は送信されません。

“no-referrer-when-downgrade”

以下に該当する場合はリファラー情報を送信し、該当しない場合はリファラーは送信されません。

  • TLS で保護された 環境設定群オブジェクトから信用に価し得る URL への要請。
  • TLS で保護されてないクライアントから任意の生成元への要請。

具体的には”https”から”http”へ遷移する場合はリファラー情報は含まれずに送信されます。”http”からはいずれも送信されます。

“same-origin”

同一ドメイン間ではリファラー情報は送信されますが、それ以外へはリファラー情報は送信されません。

“origin”

すべての場合で、リファラー情報は”origin”(URL scheme とホストの部分のみで、 path や query を除いたもの)が送信されます。

“strict-origin”

以下に該当する場合はリファラー情報は”origin”を送信し、該当しない場合はリファラーは送信されません。

  • TLS で保護されている環境設定群オブジェクトから 信用に価し得る URL への要請。
  • TLS で保護されていない環境設定群オブジェクトから 任意の生成元への要請。

これは”no-referrer-when-downgrade”と”origin”を合わせたようなものですね。

“origin-when-cross-origin”

同一ドメイン間以外ではリファラー情報は”origin”を送信します。

“strict-origin-when-cross-origin”

同一ドメイン間ではすべてのリファラー情報が送信され、”https”から”https”、または”http”からの遷移の場合は”origin”を送信します。
“https”から”http”への遷移の場合はリファラー情報は送信されません。

“unsafe-url”

いずれの場合でもすべてのリファラー情報が送信されます。

 

ARIA属性のアップデート、[wai-aria-1.1]に対応

WAI-ARIAとは、「Web Accessibility Initiative – Accessible Rich Internet Applications」の頭文字であり、HTMLやSVGで利用できるアクセシビリティをよくするための仕様です。
Webのコンテンツを正常に閲覧できない人のための配慮として様々なaria-*属性があり、5.2ではwai-aria-1.0から1.1へのアップデートに対応しました。

 

nonce属性の追加

<link>タグに対して新しく[nonce]属性が設定できるようになりました。
nonce属性はページ読み込み時にレスポンスヘッダーから”nonce-***”の値を受け取り、”nonce-“以下の値がnonce属性の値と一致した時のみリソースを読み込みます。クロスサイトスクリプティング などの攻撃からサイトを保護するための機能です。
<script>タグについてはHTML5.1から対応していましたが、5.2から<link>要素にも対応しました。

 

その他変更された内容

<keygen>、<menu>、<menuitem>タグの廃止

こんなタグがあったんですね、一度も使ったことのないままサヨナラです。

 

<input>タグの”inputmode”属性と”dropzone”の廃止

“inputmode”は主にスマートフォンなどでキーボードの入力モードを指定出来る属性です。
“dropzone”属性は今まで知らなかったで、機能も知りません。廃止になるので知らないままでいます。

 

JavaScriptモジュールの統合

<script>タグのTYPE属性に新たに”module”が追加されました。これはJavaScriptをモジュールとして読み込むかスクリプトとして読み込むかを判別をすることができるようです。

 

allowpaymentrequest属性の追加

<iframe>タグに[allowpaymentrequest]属性が追加されました。これはPayment Request APIと呼ばれる、iframe内で決済フローを行うことができるAPIを呼び出して良いかを指定するものです。

 

allow-presentation属性の追加

<iframe>、<sandbox>タグに[allow-presentation]属性が追加されました。これPresentationAPIを呼び出して良いかを指定するものです。PresentationAPIとは表示されたページを別のスクリーンに表示し、操作することができるAPIです。

 

などなど、この他にもさらにまだいくつかありますが気になった内容に絞ってピックアップしました。
W3Cの方針では1年に一度改訂を行っていくことを目標にしているということなので、また1年後くらいに改めて確認ですね。

それでは!

前後の記事

お問い合わせはこちらから

見出しアイコン スタッフ募集 Recruit

アウラでは新メンバーを募集しています。詳しくは採用ページをご覧ください。 WANTEDLYで採用募集しております。詳しくはこちら