企画書を光らせる珠玉のキーワード

HTML 5はユーザビリティにもSEOにも効く新次元の規格

企画書を光らせる 珠玉のキーワード

HTML 5

ユーザビリティにもSEOにも効く新次元の規格

ネット業界で毎日のように登場する新語には、重要なトレンドを生み出すものや、単なるから騒ぎで消えていくものがある。

ここでは、一歩先行くウェブ担当者ならぜひとも覚えておきたい注目のキーワードを紹介しよう。

小川 有希大(株式会社 ビジネス・アーキテクツ)

用語【HTML 5】

仕様の策定が進められている(まだ確定していない)、新しいHTMLの標準仕様。従来のHTMLやXHTMLの仕様をさらに拡充しており、明確で詳細な意味づけを行えるように設計されている。また、単なる「ページ」だけでなく、「ウェブアプリケーション」を構築しやすくすることも目的に含まれている。そのため、インターフェイスの部品やデータに関係する項目の追加や変更が行われるほか、スクリプトやプログラムと連携するための仕組みについても定義されている。XHTMLとしての構文も使えることから、「X/HTML 5」と呼ばれることもある。

現在はW3C(ワールドワイドウェブコンソーシアム)のHTMLワーキンググループによって草案の作成が進められている段階で、仕様として定まるのは「近い将来」よりもかなり先になる模様だ。

関連用語

ウェブアプリケーション、HTML、XHTML、XML、JavaScript、DOM

出自からわかるHTML 5の原点

図1 HTML 5の前身である「ウェブアプリケーション1.0」の策定を開始し、現在もW3Cと協調してHTML 5の策定を続けているWHATWG(ウェブハイパーテキストアプリケーション技術ワーキンググループ)。

HTML 5は、HTML、XHTMLと、それらをスクリプトなどで扱うための仕組みの定義を総合的に扱う、新しいHTML仕様だ。

HTML 5を正しく理解する大きなポイントとして、現在はウェブ標準の仕様を多く定めているW3C(ワールドワイドウェブコンソーシアム)で策定作業が進められているが、以前はWHATWGという団体によって「ウェブアプリケーション1.0(Web Applications 1.0)」という名前の仕様として開発が進められていた点がある。内容にふれる前に、まずはその根本の思想にもかかわるWHATWGという団体について軽くふれておきたい。

WHATWGの正式名称は「ウェブハイパーテキストアプリケーション技術ワーキンググループ(Web Hypertext Application Technology Working Group)」。ウェブブラウザの開発元であるApple、Mozilla、Operaを中心にして2004年に結成されたワーキンググループだ。誰でも参加でき、その他の参加メンバーには、ウェブサイトやアプリケーションの開発に携わる技術者や、関連技術の開発に興味を持つ個人も含まれる。

WHATWGの現在の主な活動として、HTML 5のほかに、「ウェブフォーム2.0(Web Forms 2.0)」「ウェブコントロール1.0(Web Controls 1.0)」といった仕様の開発が挙げられる。ウェブフォーム2.0は、HTML 4.01で定義されているフォーム関連の仕様をベースにしながら、必須入力や英数字のみなどの入力形式の限定、多様な入力タイプの追加など、フォームに関する機能や定義を拡張する仕様だ。ウェブコントロール1.0はウィジェットをスクリプトやCSSによって作成できるようにするものだが、現在策定中の他の技術仕様の影響を受ける可能性があるとして、現在もまだ草案を公開するまでには至っていない。

団体名や活動にも表されているように、この団体の目的の1つはウェブアプリケーションに関する技術展開である。より高機能なウェブアプリケーションをより簡単に構築できるよう、仕様の開発を行い、それを提供する。

より良いウェブアプリケーションのために

HTML 5がこれまでのHTML仕様と一番違うところは、文書構造の定義だけでなく、ウェブアプリケーションの操作部品や機能を提供する共通の言語として強く意識されていることだろう。これにはWHATWGの思想や昨今のウェブの使われ方が多分に影響している。

近年、グーグルのGMailや新スポンサードサーチの管理画面など、さまざまなサービスが高度なウェブアプリケーションとして提供されるようになり、より使いやすく、より特徴的な機能を求められるようになってきている。求められる処理内容も高度になり、ブラウザ上で実行されるスクリプトとサーバー側のプログラムが通信して情報をやりとりする「Ajax」と呼ばれる機能も多く使われるようになっている。

タグ

HTML、XHTMLにおいて、特定の情報や、文章・語句の意味と構造を表すための記法とその定義。この記事で「タグ」という言葉を使用する場合、タグ自体と、タグによって意味、状態などの情報が示される「要素」「属性」の概念についても含む。

もちろん、これらのウェブアプリケーションは既存の技術の組み合わせで実現されているのだが、HTML 5では新しいタグを追加することによって、さらに豊富な表現をもったウェブアプリケーションをより簡単に構築できるようになる。たとえば、入力フォームに関しては、電話番号やメールアドレスの書式チェック、必須入力項目の指定、ホテルの予約で宿泊人数分の情報が必要であれば入力欄の増減や並べ替えも、すべてHTMLのみで簡単に実装できるようになる。このような機能以外にもさまざまな仕組みが提供されることで、ウェブアプリケーションとして実現できることや機能が豊かになり、スクリプトを使わなくてもこれらの機能を実装できるようになる。

また、スクリプトやプログラムで利用できる機能についても強化されている。新たなHTML定義に対応するのはもちろん、Cookieに代わるデータ保存機能や、Ajaxで利用されるようなページ全体を改めて読み込み直すことなしにサーバーと通信を行う機能を含め、いくつかの機能が追加される予定だ。特に追加される通信機能にはP2P接続を行う仕組みもあり、新たなサービスにつながる可能性がおおいにある。

HTML 5は、ページだけでなく「ウェブアプリケーション」をより良く簡単に作るための仕様だ。

図2 HTML 5で追加される予定の代表的な機能やタグ

ウェブアプリケーション向けの機能

  • フォームの入力制限
  • フォーム項目の増減や並べ替え
  • Cookieに代わるブラウザ側でのデータ保存
  • Ajax的なサーバーとの非同期通信
  • データグリッド
  • コンテキストメニュー
  • ドラッグ&ドロップ

ページとしての情報構造を明示するタグ

section 章などの区切り
nav ナビゲーション
article 主題
aside 主題とは異なる関連情報
video 動画データ
audio 音声データ
figure 画像や動画、音声と付随する情報の関連付け

より明確になる文書構造

HTML 5では、ウェブアプリケーションに関する内容だけでなく、文書構造に関するタグも見直しと追加が行われ、従来のHTML仕様に比べ詳細な意味定義が行えるものに変更されている。

追加されるタグで文書構造について特に効果を期待できそうなのは、章ごとの区切りを行えるsectionタグ、ナビゲーションを明示するnavタグ、主題となる記事を表すarticleタグ、主題とは別の関連情報をまとめるasideタグといった、セクション定義に関するものだ。従来のHTML仕様では、ナビゲーションや記事の区別、見出しとその本文の関連性を文書構造的に明確に示すことができず、意味の不明確なdivタグによってしかグルーピングできない場合も多かった。しかし、これらのタグが追加されることで、navタグとarticleタグによってナビゲーションと記事本文は区別できるようになり、sectionタグによって見出しと本文をまとめれば、その関係は明白になる。

図3 検索エンジンにもブラウザにもメリットのある文書構造の明確化

また、テキスト以外の内容を埋め込むためのタグも種類が増えた。今までは「画像」と「それ以外」という区別しかできなかった。画像についてはimgタグ、それ以外の音声・ビデオやFlashのようなインタラクティブなコンテンツについては主にobjectタグを使用することになっていたのだ。しかし、HTML 5では映像を埋め込むためのvideoタグ、音声を再生するためのaudioタグが追加されたことにより、動画と音声についても区別できるようになる。たとえば音声を再生できない環境ではaudioタグを無視する選択も行えるし、動画に関する情報を集めたい場合にはvideoタグを手がかりにすることもできる。さらに画像や埋め込まれたコンテンツとそのタイトル、キャプションなども、新たに追加されたfigureタグでまとめることによって関連性が明らかになる。

HTML 5で導入される文書構造の定義をうまく利用すれば、検索エンジンに対して重要な本題がどこかを適切に伝えられるようになるし、ナビゲーションと記事内容が区別されればブラウザで見るユーザーの利便性も高まる。

HTML 5は他の技術とどう違う?

HTML 5は複数の分野にまたがって仕様を定めるものであるため、用途や目的が重複する他の仕様がいくつも存在する。それらとの違いや関係性を述べておく。

XHTML 2.0

HTML/XHTMLの新しい仕様としては、現在策定中のXHTML 2.0がある。(X)HTMLの新たな仕様として、お互いに比較の対象としてあげられることが多いこの2つの違いについて述べておこう。

XHTML 2.0はXMLベースのマークアップ言語、XHTMLの次期バージョンである。すでに勧告済みの(仕様として決まった)XHTML 1.1では、XMLベースになったことを除いてHTML 4.01との大きな違いはなく、HTMLからXHTMLへの移行ステップのようなものだった。XHTML 2.0ではさらに次のステップへと進み、本格的に仕様の改変が行われている。意味づけを行うためのタグを充実させ、太字にするためのbタグや斜体にするためのiタグなど、視覚的なスタイルを変更するだけのタグは一切といっていいほど削除した。また、規定されたタグだけで補いきれない語彙については、タグごとにその役割や意味を記述できる属性を追加することで補強している。このようにXHTML 2.0は、意味づけを中心にした強化とブラッシュアップが行われている。

対してHTML 5は、ここまででも述べてきたとおり、意味づけのためのマークアップだけでなくウェブアプリケーションで利用される機能にまで、その範囲を広げている。コンテンツとしての情報を扱うための従来のHTML仕様とは異なり、ウェブを通じたコミュニケーションをも視野に入れた新しい仕様だといえる。

HTML 5とXHTML 2.0の内容にはそれぞれに異なる目的が特徴としてよく表れており、優劣をつけるような比較を行うことはできない。両者が勧告された後は利用目的に合わせて選択を行うべきものとなるだろう。

現行のページ記述言語

HTML 4.01

ウェブページ作成の基本的なルールをまとめた仕様

ウェブの黎明期から続く各ブラウザの独自機能を取り込みながら拡張されてきた、基本となる仕様。

幅広く使われているが、情報の「内容」を表す要素と「表示スタイル」を表す要素が混在している。

  • 主な目的:ページ記述(ブラウザで表示するため)
  • ベース:SGML

XHTML 1/1.1

HTMLとの互換性を保ちつつXML化して厳密さを向上

HTML 4.01と同じ内容をXMLベースの言語として再定義して作られた、HTMLからXHTMLへの橋渡し的な位置づけ。

機械的に処理しやすいページを作りやすいが、表現できる情報構造はHTML 4.01と同じ程度。

  • 主な目的:ドキュメント記述
  • ベース:XML
仕様策定中のページ記述言語

HTML 5

ウェブアプリケーション構築のための「機能」を強化しつつ意味づけも強化

ページ記述に加えてウェブアプリケーション構築のための機能を強化。

「表示スタイル」に関する要素が完全に排除されたわけではないが、情報の「内容」「役割」を表す要素が追加されている。

  • 主な目的:ウェブアプリケーション構築とページ/ドキュメント記述
  • ベース:HTML/XML

XHTML 2.0

ドキュメント記述と意味づけの要素や属性を強化

XHTMLをさらに詳細な意味づけを行えるように改善し、コンテンツ(ページ)を記述する言語として特化。

情報の「表示スタイル」に関する要素は可能な限り削除されているが、モジュール化により拡張性を確保。

過去の形式との互換性は保たれない。

  • 主な目的:ドキュメント記述
  • ベース:XML
図4 既存の仕様や今後出てくる新しい仕様との特徴比較

XUL/XAML

アプリケーションを操作するインターフェイスの部品を設計して実現する言語には、代表的なものとしてFirefoxなどで利用されているMozillaの「XUL(ズール)」と、Microsoftの「XAML(ザムル)」がある。どちらも自由にタグの定義を拡張できるXMLをベースとしており、アプリケーション構築に必要な部品などの定義を行っている。

HTML 5はブラウザで閲覧/実行するウェブアプリケーションにその範囲を限定しているが、XULやXAMLはデスクトップ上で動くような通常のアプリケーションの構築まで想定している点が異なる。HTML 5では、「デスクトップ上のアプリケーションについては対象の範囲ではない」と明言しているのだ。

HTML 5の前にそびえるいくつかの壁

HTML 5と比較されるような仕様がいくつかあることもあり、何が標準の仕様として生き残るかを賭けた「標準仕様戦争」が起こるのではないか、と心配する声もある。しばらくの間はどの技術、仕様が最適なのか考えなければいけない状況が続くかもしれないが、それは結果として多くの人が真剣にウェブについて考え、ウェブという場がより良いものになっていく、という明るい見方もできるだろう。

HTML 5は現在、策定作業がWHATWGからW3C HTML WGに引き継がれている。現在も草案の策定段階であり、その後には実装テストが控えている。これらの作業を経てW3Cから勧告されるまでには、まだ長い時間がかかることだろう。実際、WHATWGからは最終的な仕様が決まるのは2022年以降になるという見解も出ている。

また、策定作業が開始された2004年と現在の2007年の間でも、ウェブに求められるものは変化している。HTML 5で変更される内容のいくつかは、現状のウェブの使われ方や開発の仕方に合わせて考えられている部分もあるため、策定作業が長引けば、これらの変化がHTML 5の仕様にも影響を及ぼすことになるだろう。そうなれば、最終的な仕様の策定までに、さらに長い時間を要する可能性もある。

もちろん、W3Cから勧告が行われた後も、開発者がHTML 5の仕様を正しく理解し、対応したブラウザを作ってリリースし、それを多くのユーザーが使うようにならなければ、実際にウェブサイトやウェブアプリケーションにHTML 5を採用するわけにはいかないだろう。

しかしながら、W3CのメンバーにはMicrosoft、Apple、Mozilla、Operaといった主要なブラウザ開発団体がおり、HTML 5の仕様はいくつかのセクションに分かれているので段階的に仕様開発とブラウザの実装を進めることもできる。既存のブラウザで独自に実装されていたものを仕様に取り込んだものもあるし、すでに一部のブラウザに実装されている内容もある。必ずしも数十年先まで実現されないものではなさそうだ。

結論:HTML 5とは

HTML 5の策定とブラウザの実装が実現すれば、さまざまなタイプのウェブサイトに導入のメリットがある。ウェブアプリケーションでは、いくつかの機能はプログラム処理を行わなくてもHTMLだけで容易に作成できるので、開発の効率化やコスト削減も望める。通常のウェブページでHTML 5を採用した場合には、今までより意味のはっきりした文書を作成でき、検索エンジンを利用してウェブサイトを訪れるユーザーに対して、より適切なページに誘導できるだろう。

このようにHTML 5はコンテンツの提供者と開発者、そしてユーザーに対して新たな可能性を示してくれる。

さて、上司や取引先から「HTML 5ってどうなの?」と聞かれたときにはどう答えればいいのだろうか。もちろん仕様が定まるまでにHTML 5の姿が変わる可能性はあるため「現時点では」という但し書き付きだが、次のように答えるといいだろう。

ウェブアプリケーションを構築して運営するならば、HTML 5を採用すれば構築のコストが下がったり、今までできなかったことができるようになったりするでしょう。

コンテンツだけのサイトでも、検索エンジン最適化の側面からも導入する意義はあります。検索エンジンもおそらくアルゴリズムを対応させてくるでしょうから。でも、CMSのテンプレート変更で対応できるのでなければ、既存のコンテンツをHTML 5で書き直すコストはコンテンツ数に応じて高くなってしまいます。

とはいえ、実際に使えるようになるまでに少なくとも数年はかかるはずなので、ウェブマスターの立場としては、まだ当面は気にしなくていいはずです。もちろん、ウェブデザイナや開発者なら、定期的に標準化の進み具合をチェックしておくべきですが。

この記事が役に立ったらシェア!
tweet8はてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

人気記事トップ10(過去7日間)

今日の用語

CTA
CTAは「Call To Action」の略。日本語の意味としては「行動喚起」と ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスオープンテキスト株式会社トランスコスモス株式会社株式会社ハイパーボックスDomain Keeper株式会社ブレインパッド
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社Sitecore