• 目　　次　　　　　　　　▼
  • サイトトップ
  • こんなときどうする？
  • サイト内検索
  • サイト内索引
  • サイトマップ
  •  
  • ホームページを作る
  • HTML トップ

HTML の W3C 標準準拠を検証する

---

W3C Validation

HTML 文書の W3C 標準への準拠状況を検証します

• HTML 検証ツール
• 検証チェック開始
• 検証結果 ‐ エラー表示
  • 警告
  • 要素 meta に関するエラー
  • 属性 "align" に関するエラー
  • 要素 img の属性 "border" と "alt" に関するエラー
  • 要素 img の属性 "hspace" に関するエラー
  • 要素 script の属性 "language" に関するエラー
  • 属性 "name"、 "id" の属性値に関するエラー
  • リスト属性に関するエラー
  • "target" 属性に関するエラー
  • "bgcolor" 属性に関するエラー
  • 要素 blockquote に関するエラー
  • 文字参照に関する警告
  • 要素 font に関するエラー
  • 要素 u に関するエラー
  • 要素 center に関するエラー
  • 要素 width に関するエラー
• 検証結果 - パスしたとき

HTML 検証ツール

DTD に準拠した、文法的に正当な (X)HTML 文書であるかをチェックするツールを HTML バリデータ (HTML Validator) と言います。

代表的なバリデータは、W3C が提供する W3C Markup Validation Service や、 k16 氏の Another HTML-lint gateway などがあります。

ここでは W3C Markup Validation Service を使って検証を行います。

ページトップへ

検証チェック開始

検証サイト (W3C Markup Validation Service) をアクセスします。

現在 （2011/01/01） の検証ツールのバージョンは W3C Markup Validator, v1.1. であることが、ページ下部に表示されています。

検証するページを入力しますが、その方法は３つあります。

１．　Web ページの URI を入力する

２．　パソコンにあるページファイルを指定する。

３．　HTML を直接入力する。

ここでは、２．の方法をとります。

「参照」 ボタンをクリックして、パソコンのホルダー
から、検証するページを指定します。

「Check」 ボタンをクリックすると検証が開始され、結果が表示されます。

ページトップへ

検証結果 ‐ エラー表示

検証サイト (W3C Markup Validator) による検証の結果、エラーがあると右図のように、エラーがあることと、その数が表示されます。

検証したファイルの DOCTYPE もリストされるので、確認します。

当サイトのページを中心に検証した結果のエラーと、その修正をグループ分けして紹介します。

警告

Byte-Order Mark found in UTF-8 File.

ユニコード (Unicode) の Byte-Order Mark (BOM) はファイルの先頭におかれる "FEFF" など１６ビット幅の値で、本来 UTF-16 用のものだが、これが UTF-8 ファイルと指定している当ファイルに見つかった。これがあるとブラウザによっては問題を起こしますとの警告です。

意図的にそのようなものを入力したことはないのだが、XHTMLファイルをメモ帳で作った場合に発生することを経験している。

解決策は、ホームページビルダーで該当ファイルを開き、HTMLソースの先頭行の先頭にあるスペースを削除して保存すると、警告は出なくなります。

要素 meta に関するエラー

there is no attribute "name"

there is no attribute "content"

element "META" undefined

element "META" undefined

• XHTMLソース ：
  • <META name="copyright" content="ホームページ・ビルダー (C) Copyright IBM Corp. 1995, 2009" />

要素 meta が大文字になっているために、エラーになりました。

過去のバージョンで作成したページをコピーしたために残ったものでしょう。

meta を小文字にするだけで、上記４つのエラーは回避されます。

• 修正後 XHTMLソース ：
  • <meta name="copyright" content="ホームページ・ビルダー (C) Copyright IBM Corp. 1995, 2009" />

属性 "align" に関するエラー

there is no attribute "align"

• XHTMLソース ：
  • <h1 align="center"><a name="top" id="top">CSSの基本</a></h1>

属性 align は過去において使われてきましたが、非推奨。

代わりに CSS text-align プロパティにてテキストあるいは inline 要素 (img など) を要素内でどの位置に配置するかを指定するとなっています。

また、CSS float プロパティを使用して回り込みを指定します。

ここでは h1 に指定しているが、本来意図して記述したものかどうかは不明。

従って、align="center" は削除します。

• 修正 XHTMLソース ：
  • <h1><a name="top" id="top">CSSの基本</a></h1>

要素 img の属性 "border" と "alt" に関するエラー

there is no attribute "border"

• XHTMLソース ：
  • <img src="images/image237.jpg" width="479" height="331" border="0" class="image_right" alt="検証のためのインプット" />

過去に使われていた border 属性は、XHTML 1.0 Strict では非推奨となっています。

border="0" を削除して、CSS で回避することになります。

修正：

• 修正 CSSソース：
  • img { border : none ; }

• 修正 XHTMLソース ：
  • <img src="images/image237.jpg" width="479" height="331" class="image_right" alt="検証のためのインプット" />

required attribute "alt" not specified

• XHTMLソース ：
  • <img src="images/image2143.jpg" width="500" height="450" class="image_right" />

属性 alt が指定されていないことでのエラー。

• 修正XHTMLソース ：
  • <img src="images/image2143.jpg" width="500" height="450" class="image_right" alt="ボーダースタイルの設定" />

要素 img の属性 "hspace" に関するエラー

there is no attribute "hspace"

• XHTMLソース ：
  • <img class="image_right" src="images/image723.jpg" width="160" height="154" alt="挿入したばかりの表" hspace="20" />

Strict バージョンでは "hspace" は非推奨となりました。替りに CSS で margin-right、margin-left を指定します。

• 修正XHTMLソース ：
  • <img class="image_right" src="images/image723.jpg" width="160" height="154" alt="挿入したばかりの表" style="margin-left: 20; margin-right: 20;" />

要素 script の属性 "language" に関するエラー

there is no attribute "language"

required attribute "type" not specified

• 修正前 XHTMLソース ：
  • <script language="JavaScript" src="script/LastModified.js" charset="Shift_JIS">

JavaScript に求められている type 属性が記述されていないので、上の二つのエラーがでている。

修正は、language="JavaScript" を削除して、代わりに type="text/javascript" を記述します。

• 修正 XHTMLソース ：
  • <script type="text/javascript" src="script/LastModified.js" charset="Shift_JIS">

属性 "name"、 "id" の属性値に関するエラー

value of attribute "name" must be a single token

value of attribute "id" must be a single token

• XHTMLソース ：
  • <h2><a name="line separation" id="line separation">line-height プロパティによる行間算出の仕組み</a></h2>

これら name と id の属性は、スペースで区切られた複数の言葉をその値としては受けつけません。一つの言葉 ("token") だけが許されています。

この場合は、二つの単語の間にスペースを入れたままにしたためのエラーで、修正はスペース部分にハイフンを入れました。

• 修正後 XHTMLソース ：
  • <h2><a name="line-separation" id="line-separation">line-height プロパティによる行間算出の仕組み</a></h2>

character "?" is not allowed in the value of attribute "name"

character "?" is not allowed in the value of attribute "id"

• XHTMLソース ：
  • <h2><a name="what_is_it?" id="what_is_it?">ロールオーバー効果とは</a></h2>

name と id で許される記号に、"?" は無い。

• 修正後 XHTMLソース ：
  • <h2><a name="what_is_it" id="what_is_it">ロールオーバー効果とは</a></h2>

character "'" is not allowed in the value of attribute "name"

character "'" is not allowed in the value of attribute "id"

• XHTMLソース ：
  • <h3><a name="what's HP?" id="what's HP?">ホームページとは何だろう？！</a></h3>

• 修正後 XHTMLソース ：
  • <h3><a name="what_is_HP" id="what_is_HP">ホームページとは何だろう？！</a></h3>

リスト属性に関するエラー

there is no attribute "type"

• XHTMLソース ：
  • <ol type="a">

ここは、<ol style="list-style-type : lower-alpha ;"> と置き換えます。

• 修正 XHTMLソース ：
  • <ol style="list-style-type : lower-alpha; ">

there is no attribute "start"

there is no attribute "value"

• XHTMLソース ：
  • <ol style="list-style-type: decimal" start="7">

• XHTMLソース ：
  • <ol style="list-style-type: upper-alpha;">
  •    <li value="8">８番目</li>

要素 ol の start および value プロパティは非推奨となりました。替りに、CSS でカウンターを使い、その値をリスト項目のマーカー位置にリストする方法があるようです。

• 修正 CSSソース：
  • ol#list_1 { counter-reset : item ; }
  • ol#list_7 { counter-reset : item 6 ; }
  • ol#list_8 { counter-reset : item 7 ; }
  • ol#list_1>li, ol#list_7>li, ol#list_8>li { list-style-type : none ; text-indent : -1.5em ; }
  • ol#list_1>li:before, ol#list_7>li:before, ol#list_8>li:before {
  •      content : counter(item,upper-alpha)"　" ;
  •      counter-increment : item ;
  •      list-style-type : none ;
  •      text-indent : -1.5em ;
  • }

• 修正 XHTMLソース ：
  • <ol id="list_1">
  •      <li>一番目</li>
  •      <li>二番目</li>
  •      -------------
  • </ol>
  • <ol id="list_7">
  •      <li>七番目</li>
  • </ol>
  • <ol id="list_8">
  •      <li>八番目</li>
  •      <li>九番目</li>
  • </ol>

"target" 属性に関するエラー

there is no attribute "target"

• XHTMLソース ：
  • <a href="css07_sample01.html" target="_blank">css07_sample01.html</a>

このエラーは Strict でおこります。Strict では "target" 属性は無くなりました。

CSS で代用する方法も無いようです。

アクセシビリティを考慮すると、"target" 属性は使用しない方が良いのかもしれません。ユーザーの意図に関係なく、新しいウインドウが次々に開いてしまい、戻りが分からなくなるなど、ユーザーを混乱させるのを避けるのは制作者として考慮しなくてはならないでしょう。

それとは別に、新しいウインドウを親ウインドウとは別に開いて説明をするなどの使い方も捨てがたいものです。

エラーを避ける方法で考えられるものは、１．target 属性を使わない、２．Strict ではなく Transitional に変更する、３．JavaScriptを使用する、などがあります。

Strict に固執し、新しいウインドウで開くのを追及するのであれば、３．の方法を執ることになります。

• 修正 XHTMLソース ：
  • <a href="css07_sample01.html" onclick="window.open(this.href,'new',''); return false">css07_sample01.html</a>

"bgcolor" 属性に関するエラー

there is no attribute "bgcolor"

• XHTMLソース ：
  • <td bgcolor="#cccccc">互換</td>

bgcolor 属性は、table、tr、td要素での指定は Strict バージョンでは禁止となりました。CSS で背景色を指定します。

• 修正 CSSソース：
  • .gokan { background-color : #cccccc ; }

• 修正 XHTMLソース：
  • <td class="gokan">互換</td>

要素 blockquote に関するエラー

character data is not allowed here

• XHTMLソース ：
  • <blockquote>(極めて小さい、小さい、やや小さい、標準、やや大きい、大きい、極めて大きい) 左から順にサイズが大きくなります。

要素 blockquote が Strict 準拠であるには、この要素が囲むコンテンツはブロックレベルの要素のみです。

それは <div> あるいは <p> などのコンテナーで囲まれたコンテンツである必要があるのです。

• 修正後 XHTMLソース ：
  • <blockquote><div>(極めて小さい、小さい、やや小さい、標準、やや大きい、大きい、極めて大きい) 左から順にサイズが大きくなります。

文字参照に関する警告

reference not terminated by REFC delimiter

• XHTMLソース ：
  • <li>&#160:</li>

"&" で始まる特殊文字は";" で終わらなければならない。

• 修正 XHTMLソース ：
  • <li>&#160;</li>

要素 font に関するエラー

there is no attribute "color"

element "font" undefined

• XHTMLソース ：
  • <li><font color="#ff0000">p.note {color : red !important ; }</font…></li>

font タグは、テキストの色、フォントなどを指定するのに使われてきたが正式に非推奨となりました

テキストに関する指定はCSSを使っておこなうことになります。

• 修正 CSSソース：
  • .font_red { color : #ff0000 ; }

• 修正 XHTMLソース：
  • <li><span class="font_red">p.note {color : red !important ; }</span></li>

要素 u に関するエラー

element "u" undefined

• XHTMLソース ：
  • <p>まず、ファイルを<u>保存しないで閉じます</u>。次にホームページビルダーも閉じます。</p>

下線要素の <u> タグは Strict では非推奨となっています。これに代えては、CSSで text-decoration プロパティで underline を指定することになります。

• 修正 CSSソース：
  • .underline { text-decoration : undeline ; }

• 修正 XHTMLソース：
  • <p>まず、ファイルを<span class="underline">保存しないで閉じます</span>。次にホームページビルダーも閉じます。</p>

element "u" undefined

• XHTMLソース ：
  • <p style="width: 160px; display: block; text-align : center;" class="image_left"><u>Internet Explorer (IE)</u></p>

下線を CSS の text-decoration: underline; で設定します。

• 修正 XHTMLソース：
  • <p style="width: 160px; display: block; text-align : center; text-decoration: underline;" class="image_left">Internet Explorer (IE)</p>

要素 center に関するエラー

element "center" undefined

• XHTMLソース ：
  • <center>

非推奨なので、CSSにて対応します。この場合は表をページ中央に揃えるので、margin-right: auto; と margin-left: auto; 、そして width を指定します。

• 修正 CSSソース：
  • .tablespace { margin-right : auto ; margin-left : auto ; }

• 修正 XHTMLソース：
  • <table class="tablespace">

要素 width に関するエラー

there is no attribute "width"

• XHTMLソース ：
  • <td width="465" align="center">PNG (15.3KB)</td>

<td> ステートメントから width を削除します。

• 修正 XHTMLソース：
  • <td align="center">PNG (15.3KB)</td>

ページトップへ

検証結果 - パスしたとき

検証結果、パスした時には次のようなメッセージが表示されます。

Congratulations

The uploaded document "css07.html" was successfully checked as XHTML 1.0 Strict. This means that the resource in question identified itself as "XHTML 1.0 Strict" and that we successfully performed a formal validation using an SGML, HTML5 and/or XML Parser(s) (depending on the markup language used).

おめでとうございます。

アプロードして検証したページ "css07.html" が、 XHTML 1.0 Strict の検証にパスしました。このことは、該当のページが "XHTML 1.0 Strict" と見做されるということで、使われている HTML5 の正式な検証を成功裡になしとげております。

ページに検証済アイコンを表示する場合には、HTMLをコピーし貼り付けることができます。

ページトップへ

---

| |