W3C Markup Validatorのエラー修正やってみた 3【XHTML 1.0編】

今回は、XHTML 1.0で作られたとあるサイトに行ったW3C Markup Validatorのエラー修正についてまとめてみます。そのサイトは古いEC-CUBEで作られてます。

「XHTML 1.0」は「HTML4.01」から派生したXMLとHTMLを合わせたようなもので、拡張可能なマークアップ言語として作られました。HTMLとの違いは、要素は小文字でなければならない、タグは閉じなければならないなど厳格な規則と独自の要素を追加できるところなどです。HTML5が出来てHTML4.01同様過去のものになってしまいましたが、まだ生き残ってもいるんですよね。HTML5に変えなければならない理由がない限り、ずっとこのままでしょう。

それでは検証スタートです。

Markup Validation Service

there is no attribute “placeholder”

これはそのまま、placeholderなんて属性はありませんよ、ということです。placeholder属性はHTML5で導入された属性ですので、XHTML 1.0では検証エラーになります。

その対策は、placeholderを使わないことです。そこで「Simple Textbox Watermark」というjQueryプラグインを導入します。

Simple Textbox Watermark

このプラグインを使えば、placeholder属性を使わず、title属性に書かれたテキストが入力フォームにうっすら表示されるようになります。導入方法は上記サイトにしっかり書かれているので割愛。これでこのエラーは解消されました。

※2016-03-24追記:このプラグインを使う場合、フォーム送信前にwatermark(透かし)のテキストをクリアするために、以下のように明示的にwatermarkをクリアするコードを書かないといけないようです。ちょっと面倒ですがこれで対策は完了です。

there is no attribute “class”

このエラーは上記同様、class属性がないというものですが、とにかくタグを見てみましょう。

フォームのサブミットをする画像ボタンです。

すぐお分かりかと思いますが、imageなんてタグはありません。inputに直したらエラー解消されました。何故こんなミスを・・・。

there is no attribute “width”

またですね。今度はwidth属性がないと言われました。height属性も同様のエラーが出ています。このエラーは先ほどのタグと同じところです。つまり、inputタグにwidth属性やheight属性は付けられないということでしょう。本来ならimgタグに書くべき属性ですからね。

画像のサイズ指定はCSSにまかせてwidth属性とheight属性を削除すると、エラーが解消されました。

there is no attribute “onClick”

またまた同じタグで同じタイプのエラーです。このタグを書いたのは誰だと怒りたいところですが、これは簡単。XHTMLでは要素だけでなく、属性も小文字で書かなければなりません。onClickをonclickと小文字にしたところ、エラーは解消されました。

character “ ” not allowed in attribute specification list

これはタグのなかに全角スペースを入れてしまっていたことによるエラーです。ありがちですね・・・全角スペースを半角に変えてエラー解消です。

required attribute “src” not specified

これはインラインのjQueryでimgタグを生成しようとしているコードで出たエラーです。同じ箇所で”alt”についても必須エラーが出ています。

実際のコードから少し変えてますがこういうコードです。XHTMLではimgタグのsrc属性とalt属性は必須のようです。alt属性まで必須というのは厳しいですね。ようやくXHTMLっぽいエラーが出ました。

解決策はインラインでjavascriptのコードを書かないこと・・・ですが、外部ファイルにするとロード時間もかさむし何より面倒なので、こんな風に直してエラー修正しました。

document type does not allow element “img” here

エラー箇所は先ほどのjavascriptのコードです。このエラーはタグの位置がおかしいというエラーで、タグが間違った位置に書かれている、許されていない入れ子構造になっているなどといった場合に引っかかります。

今回の場合、scriptタグ内でHTMLタグを記述していることが原因になっています。

今回の場合については、エラーの修正にはCDATAセクションを使います。CDATAセクションはXMLのための記述で、このセクションの中にあるマークアップをマークアップとして解釈しないようにできます。XHTMLにおいて、HTMLタグをタグではなくただの文字列として記述したい場合はCDATAセクションで囲んでください。CDATAセクションは以下のように記述します。

入れ子構造がおかしい、などといった文書的な間違いの場合はそれぞれの原因にあった修正を行ってください。今回はたまたまscriptタグ内でHTMLタグを記述していたことによるエラーですので、CDATAセクションでこのエラーがすべて解決するわけではありません。

required attribute “type” not specified

type属性の必須エラーですが、これはscriptタグについて言われています。XHTMLでは必須ということですね。「type=”text/javascript”」をscriptタグにつけておしまいです。

general entity “ああああ” not defined and no default entity

これはエラーの内容より、その概要を見てください。概要は、エラー内容とエラー箇所のコード抜粋の下に小さな文字で、そのエラーがどういったエラーなのかの簡単な説明をしている箇所のことです。

このエラーの概要は「This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.」とあります。長い英文ですが、要約すると「だいたいHTMLエスケープされてない&のせい」ということです。

この概要が書かれているエラーは他に「reference to entity “ああああ” for which no system identifier could be generated」などあります。

この概要を持つエラーが出たら行うことは「&」を「&」に変換することです。HTMLに直接「&」が書いてある場合は、マークアップ担当者が直せるでしょう。しかしマークアップ担当者が直せない場合もあります。例えば顧客が何かのツールでDBに登録したデータや記事をサイトに表示している場合です。今回このエラーが出ている箇所もそういったDBのデータを表示しているところです。

その場合は、例えばPHPサイトなら表示用のデータにHTMLエスケープ変換するhtmlspecialchars関数を使うなどします。要するにシステムの変更が必要になる場合があるということです。たいていの言語やフレームワークにはHTMLエスケープするための方法があるので、それを使用しましょう。普通は最初からエスケープを考慮して開発するんですけどね・・・ひどいサイトだ。

今回は以上です。今回はサイトの1ページ分で出てきたエラーの修正でしたが、サイト全部調べたらもっといろいろなパターンが出てくるかもしれませんね・・・。

広告
  • LINEで送る