今、Webブラウザー上のアプリではどのような機能や表現が実現できるのか。最新のHTMLマークアップを使いこなせれば、これまでは難しかった機能も実装できる。

 前回はWebブラウザーの最新の状況を押さえた。今回はWebコンテンツの表示に欠かせないHTMLマークアップの動向を見ていこう。W3CでHTML5仕様が標準化されたことで、大きく変わったことの1つがHTMLのマークアップだ。標準化以降もHTMLのマークアップは変わり続けている。

 HTMLのマークアップの仕様は、国際標準化団体W3Cで標準化されたHTML5仕様で規定されている。HTML5仕様が勧告に至ったのは、もう4年以上前の2014年10月のことだ。しかしその後の動きは、さほど大きな話題になっていないこともあり、最新の状況を知らない読者も多いのではないだろうか。

 HTML5の仕様は進化し続けている。2016年11月にHTML5.1が、2017年12月にHTML5.2が勧告に至っている。「W3Cの最新のHTML5仕様」といった場合、2019年1月時点ではHTML5.2を指す。今なおW3Cでは仕様策定作業が継続されており、すでにHTML 5.3の草案が存在している。

 ところでHTML5の仕様は、もともと「WHATWG(Web Hypertext Application Technology Working Group)」という、Webブラウザーベンダーが中心となって設立された団体によって作られたものだ。こちらも今なお活動は継続されている。WHATWGが策定している仕様は現在、HTML5という名前は使われておらず、単にHTMLと呼ばれている。

 WHATWGの仕様はバージョン番号を持たずに、常にアップデートされ続けている。このようにアップデートされ続ける仕様を「Living Standard」と呼ぶ。W3Cの仕様は、WHATWGのHTML仕様のスナップショットとの位置づけになる。

 ところが話はそう簡単ではないのが悩ましいところだ。どちらも基本的には同じのはずなのだが、W3CのHTML5仕様は、部分的に変更されているところがあるのだ。

 以下では、HTML 5.1とHTML 5.2で新たに加わった要素(タグ)のうち、重要な要素を紹介していこう。

ダイアログボックスを表示する「dialog要素」

 dialog要素は主にダイアログボックスを表す。ダイアログというが、会話をマークアップするわけではないので注意してほしい。

<dialog open>
  <h2>dialog 要素のテスト</h2>
  <p>dialog 要素はダイアログボックスを表します。</p>
</dialog>

<script>
  document.body.addEventListener('click', () => {
    document.querySelector('dialog').open = false;
  }, false);
</script>

 dialog要素にopen属性を与えると、ダイアログボックスがブラウザーのコンテンツ表示領域の中央に表示される。JavaScriptを使って、該当のdialog要素のopenプロパティにfalseをセットすれば画面から消える。

dialog要素の利用例
[画像のクリックで拡大表示]

解像度に応じて画像を変える「picture要素」

 picture要素はRWD(レスポンシブWebデザイン)が主流になることを踏まえた、画像切り替え表示のため登場した要素だ。

 Webコンテンツを開発する際には画面解像度が高いPCでは高解像度の画像ファイルを、スマートフォンでは低解像度の画像ファイルを表示させたいケースがある。スマートフォン向けには、無駄に大きな画像ファイルをダウンロードさせたくない場合や、解像度の違いによって表示する画像を変えたい場合だ。

この先は有料会員の登録が必要です。有料会員(月額プラン)は初月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら