HTML5/Web標準

今、Webの世界は、「セマンティックWeb」へ向かうという大きな流れの中にあります。
最近盛んに言われる「Web2.0」というワードも、その文脈の中で語られるべきワードです。
この大きな流れの中で、ウェブ制作者として無視できない重要ワードがあります。それは「Web標準(Web Standard)」です。
Web標準とは、一言で言うと「ウェブコンテンツをW3Cの仕様に準拠して制作すること」となります。W3Cというのは、ウェブで利用される技術の規格を定めている団体です。
“Web標準で作る”ということは、“正しいHTMLでページを作成すること”と言い換えても良いものです。
例えば、これまではレイアウトをtableタグでマークアップする場合がほとんどでした。
しかし、本来tableタグはレイアウトをするためのものではなく、表を表示するためのものです。W3Cの仕様では、レイアウトを組むためにtableを使うのは、本来は良くないとされています。
ではどうやってデザイン処理された見やすいレイアウトを実現するのでしょうか?
「Web標準」では、レイアウトを含むデザイン処理をCSS(スタイルシート)で行います。
これまでは、閲覧ソフトであるブラウザ側のCSSへの対応が未整備でした。
しかしここへきて、ブラウザ側も「セマンティックWeb」へ向かうインターネットの流れの中で、「Web2.0」的スクリプトへの対応だけでなく、CSSへの対応も整備してきました。
現在、ウェブサイトは、官公庁や大企業を中心に、「Web標準」での構築がトレンドとなっています。
理由は、当然にメリットが多いからです。
“Web標準”のメリット
「Web標準」では、レイアウトを含むデザイン処理をCSS(スタイルシート)で行います。
ですから、文書構造を司る(X)HTMLとデザインを司るCSSが分離しています。
(X)HTML+CSSの場合、デザインに関する記述がCSSに分離されるため、(X)HTMLの方は非常にシンプルです。また、(X)HTMLで、<h1>〜<h6>といった見出しタグが、きちんと構造化されています。
これによって、大きく次のようなメリットがあります。
[メリット1]SEOで有利
検索エンジンは世の中にあるホームページを巡回して、自身のデータベース(索引)に登録していきます。これを「インデックスされる」と言ったりします。
例えば100ページあるウェブサイトなのに、50ページしかインデックスされないと、その時点で検索エンジン経由のアクセスの50%を失っているかもしれません。ですから、確実に全てのページを、検索エンジンにインデックスされるようにしたいところです。
「Web標準」で作成したHTMLは、W3Cの仕様に準拠した正しいHTMLです。検索エンジンも、「正しいHTML」を前提に作られています。ですから「Web標準」で作成したHTMLは、検索エンジンがとても理解しやすいのです。 つまり、確実にインデックスしてもらえるということです。
[メリット2]ページが軽い
ブロードバンドが普及した今となっては、昔ほどはページの重さも気にされなくなりましたが、「Web標準」では“実際の重さ”と“体感的な重さ”の両方で軽いです。
“実際の重さ”、つまりファイル容量は、(X)HTML + CSS と従来の HTML 4.0 で全く同じレイアウトを実現したとすると、HTMLファイルだけの比較なら半分ぐらいに減ると言われています。
現実には画像の重さも加味すると半分にはなりませんが、大規模サイトでは、全体の転送量、つまりサーバや回線の負荷の軽減につながることは明らかです。
大企業やアクセスの多いサイトは無視できないメリットです。
“体感的な重さ”については、従来の<table>タグを使ったレイアウトの場合は、閉じタグ</table>が読み込まれるまでそのtable自体が表示されないというHTMLの性質があるので、読み込まれたところから徐々に表示を始める(X)HTML + CSS の方よりも重く感じます。
[メリット3]メンテナンス性が優れている
先に述べたようにHTMLが非常にシンプルなので、何か文言を追加する際に、複雑なtableレイアウトにする必要がないので、工数が減ります。
また、デザイン部分は外部ファイルであるCSSで制御されているので、ウェブサイト全体に渡るデザインを修正したいと思った際に、個別のHTMLをいじる必要が無くなります。
ただし、これを実現するためには、ウェブサイト構築時に、きちんと運用のことも考えならが設計・開発する必要があります。
[メリット4]アクセシビリティが確保しやすい
アクセシビリティというのは、いわゆるホームページのユニバーサルデザインのことです。
例えば、目の不自由な人はスクリーンリーダーという、ホームページを読み上げるソフトを使いますが、こういったソフトも正しいHTML構造に最適化されています。
[参考]ウェブ・アクセシビリティ(ウェブコンテンツJIS)