ウェブサイトが HTML5 で記述されているか簡単に見分ける - Google Chrome の HTML5 markup detector, Firefox の Html Validator

1. サイトが HTML5 で記述されているか知りたい

現在、 HTML5 で記述されているウェブサイトの割合はどのくらいだろう？

2014年にも正式勧告へ：HTML5仕様策定完了、HTML 5.1に向けた取り組みも開始 - ＠IT （2012/12/18）によると、

HTML5の開発ツールを提供しているKendo UIが行った調査によると、63％を超えるディベロッパーが「HTML5を使って積極的に開発している」という旨を示している。

「HTML5で作られたでサイト」で検索してみると、HTML5で書かれた企業や、特徴を生かしたサイトが紹介されている。

このようなサイトを閲覧したとき、ソースを確認せずに、HTML5 で書かれているか知りたい。

2. Google Chrome の HTML5 markup detector

HTML5のdoctypeの書き方が <!doctype html> であることから表示中のページのdoctypeがそれに該当するかどうかで判定し、アドレスバーの右端に"マル５"と表示してくれるものです。Chrome ウェブストア - HTML5 markup detector

HTML5 markup detector をインストールし、HTML5 で書かれたサイトにアクセスすると、ロケーションバーに緑色で `5’ と表示される。

3. Firefox の Html Validator

Firefox では、アドオン Html Validator を利用する。

Html Validator をインストールすると、画面下のアドオンバーに HTML の妥当性検査の結果が表示される。

HTML5 で書かれたサイトでは、Google Chrome の HTML5 markup detector のように、アイコンに `5’ と表示される。

ただし、このアイコン Html Validator のバージョン 0.952 より表示される。

cf. Html Validator for Firefox and Mozilla の 2012-JAN-24

a. 最新版のインストール

最新版をインストールするには、以下のリンクより行う。

Html Validator for Firefox and Mozilla
- Download HTML Validator for Windows 32 bits

b. 表示のカスタマイズ

デフォルトでは、「エラー」と「警告」の個数が表示される。今回、サイトが HTML5 で書かれているか見分けが付けば良いので「アイコンのみ表示」した。

アドオンバーにある Html Validator を右クリックし、

表示 > アイコンのみ

を選択しておいた。

c. 検証の方法

Html Validator が HTML の検証を行う方法は２つある。アドオンバーにある Html Validator を右クリックし、

オプション > 一般 > アルゴリズム

で選択する。詳細は 2. Tidy vs SGML parser を参照。

4. ソースで見分ける

a. 文書型宣言

上記で引用したように、HTML5 では、文書の冒頭には、

<!DOCTYPE html>

と書かれている。この記述は「文書型宣言」と呼ばれる。

文書型宣言の意味 -- ごく簡単なHTMLの説明によると、

HTML文書の先頭に記述する<!DOCTYPE ...という宣言は、その文書がどんな定義(DTD)に基づいて記述されるかを示すものです。

b. 文書型定義

HTML の黎明期には、かなり自由な書き方がされており、それをブラウザ側が解釈した。

HyperText Markup Language – Wikipedia によると、

HTMLの初期のバージョンはゆるい文法規則によって定義されており、ウェブ技術になじみのない層に受け入れられる助けとなった。ウェブブラウザはウェブページの意図を推測し、レンダリングを実行するのが一般的であった。やがて公式規格においては厳格な言語構文をつくることを志向するようになっていったが、お節介な解釈をするブラウザは今でも存在する。…

1993年にはIETFからHTML仕様書バージョン 1.0が公開され、SGMLからの拡張として文法定義のDTDを持つようになった。

DTD とは、Document Type Definition – Wikipedia によると、

Document Type Definition（文書型定義、DTD）とは、マークアップ言語 SGMLおよびXMLにおいて、文書構造（文書型）を定義するためのスキーマ言語の一つである。

DTDでは、SGMLやXMLの文書内に記述することができる要素やその発生順序、発生回数、要素がもつ属性、属性の型などを記述することができる。

SGML とは、Standard Generalized Markup Language – Wikipedia によると、

簡単に言えば、マニュアルなどの文書の電子化のための書式の規格である。HTMLおよびXMLの、スーパーセット（親）にあたる。

軍艦や軍用機などは数十年という長期間の保有が必要になるため、長期間にわたりデータが利用可能とならなければならない。電子文書は特定の企業のワープロソフトを用いるとそのソフトのバージョンが上がったり、最悪の場合そのソフトを開発している会社が開発を中止したり、倒産したりしてソフトウェアが無くなった場合は、今まで作成したデータが読めなくなるという問題が発生してしまう。そこで、プレーンテキストのみを用いて、「タグ」を使うことによってデータに意味を持たせることが考えられた。

このようにして規格化されたのがSGMLであった。

このように、HTML は書き方のルールが定義されており、どのルールに基づいて記述しているかを冒頭で示す。

例えば、 HTML 4.01 の場合、HyperText Markup Language – Wikipedia によると、

HTMLで書かれた文書をHTML文書と言い、DTDによって定義される書式に沿って記述しなければならない。DTDは文書型宣言（DOCTYPE宣言）で宣言したバージョンのものが選択される。…

HTMLでは、まず文書型宣言を書く。文書型宣言が無いものは、HTMLの規格に従っているとはいえない。HTML 4.01 Strictの文書型宣言は以下のようなものである。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
このとき、HTML 4.01 Strictの使用およびそのDTDの場所が明示されている。

c. HTML5 では DTD を利用できない

これに対して、HTML5 では DTD が利用できない。

HTML5 – Wikipedia によると、

HTML5仕様においては、文書型宣言はもはやモード指定以外の意味をなさず、その書式は “<!DOCTYPE html>” である。

HTML構文では文書型宣言は必須である。XHTML構文では、HTML5で導入される新しい機能を利用する場合は必須、それ以外の場合は文書型宣言は必須ではない。

従来のHTML規格で提供されていたDTDがなくなり、また文書型宣言の書式が決まっているため、HTML5ではDTDが利用できず、DTDに依存する多くの機能のほとんどが扱えなくなる。

HTML5にはDTDはないのでしょうか？ - Yahoo!知恵袋

公式にはありません。HTML(5) は SGML でも XML でもありませんので、DTD でも Schema でも制約を十分に書くことができません。HTML(5) の要素タイプ自体は Web IDL で定義され、構文解析には独自のアルゴリズムを用います。

HTML 5について(関連コラム集)

HTML 5は従来の在来HTMLと異なり、SGMLの応用言語である事を放棄しております。

もともと、HTMLはSGMLの応用言語とされてはいたものの、実際にはSGMLの仕様通りに処理するウェブブラウザは全くと言って良いほどありませんでした。

一方、SGML応用系にしてしまうと、例えばスクリプト処理やプラグインで必要な任意の属性などが記述出来なくなります。或いは、MathMLやSVGなどの埋め込みも出来なくなります(

d. ブラウザのモード

HTML5でマークアップしてみよう－HTML5リファレンス

HTML5におけるDOCTYPE宣言は、あまり意味を持たないとされていますが、 DOCTYPE宣言が無いとブラウザのレンダリングモードが、互換モード（Quirks mode）となってしまいます。ブラウザに標準モード（Standards mode）で解釈させたい場合には、DOCTYPE宣言を記述する必要があります。

DOCTYPE宣言がないとIE7でも表示は古いまま [ホームページ作成] All About

ブラウザには「標準モード」と「互換モード」の2種類の描画モードがある

代表的なブラウザの最新版には、描画モードとして、「標準モード」と「互換モード」という2つのモードが用意されています。この違いは、次の通りです。

「標準モード」：できるだけ文法を正しく解釈して表示します。文法ミスがあれば、その記述は無視します。

「互換モード」：古いバージョンのブラウザに合わせた表示をします。古いバージョンで誤って解釈していた部分は、誤ったままで表示します。文法ミスがあっても適当に解釈して表示します。

なぜ2つのモードがあるのか？

最近のブラウザは、HTMLやスタイルシートを仕様通りに正しく解釈して表示できるようになってきています。しかし、昔のブラウザは、仕様とは異なる誤った解釈で表示してしまうことが多くありました。そのため、ウェブ上には、その「誤った表示」を基準にして作られたページがたくさんできてしまいました。

そのような中、いきなり最新のブラウザで「仕様通りの正しい解釈」を強制的に採用すると、「誤った表示」を基準にして作られたページの表示がおかしくなってしまう可能性があります。

そのような問題を避けるために用意されたのが、「互換モード」という描画モードです。このモードでは、過去のブラウザが誤って解釈していた部分は、それと同じように誤った解釈のまま表示します。

Firefox では、ページ情報に「モード」が示される。

ページ情報ウィンドウ | Firefox ヘルプによると、

描画モード: ページが Web のコーディング標準 (標準準拠モード) に従っているかどうかを表示します。ページが非標準の場合、Firefox は互換性のある方法 (後方互換モード) で表示します。

ページで右クリック > ページの情報を表示 > 一般 > 描画モード

すぐに忘れる脳みそのためのメモ

2013年2月11日月曜日