Validation

ここではホームページ制作する上でルールに沿った作成を行っているか検証する方法について確認します。

今回、Validater.nuを使用して本ページの検証を行います。

Validator.nu (X)HTML5 Validator (Living Validator)

こちらのサイトに関してはHTML5対応のサイト検証のページとして非常に知名度が高く、実際に使用してみた感じでは、分かり易くエラーを指摘してくれるページです。

正直ページのバリデートに関しては、ホームページを作成する時間を優先しチェックや検証は後回しにしていた為、ページの修正もかけていなかった為、今回ページチェックを行ってみると多くのエラーが発生していました。

基本的に本ページ制作に関しては特にアプリケーションを使用しておらず主にエディタでの記述だった為、ある程度のエラーの発生は予測はしていましたが、逆に手書きでのコード記述であることで修正も楽ではあります。

エラーの大部分に関しては単純なケアレスミスから発生する間違った場所や意味のないタグづけおこなってしまったこと、要素固有のコンテンツ属性を本来であればスタイルシートで 指定するものをhtml本文へ記述するところをhtml本文に記述してしまったことでエラーとなってしまったケースなど、終了タグがない為、要素が閉じられていなかったケースなど 単純なケアレスミスが多く発生していました。

以下、バリデート結果を上位のみ画像表示いたします。

上の検証より修正箇所が見つかったことで、あとは次のように修正を行っていきます。

1.object要素内でのwidth=%使用の誤り

・スタイルシート内で要素に幅の指定を行うことで修正

2.誤った関連の内タグづけ

・/pタグを削除

3.dl内でのbrの使用

・brタグを消去

4.dl内でのsecton要素の使用、dl終了タグがなく要素が閉じられていない。

・dl終了タグを使用しタグ付の誤りを修正

バリデートサイトで出てしまったエラーを修正し、再度エラーを無くした状態でサイトをバリデートすると次のような画面になります。

これで基本的なマークアップは問題ないということになります。但しこれはあくまでマークアップの正誤の判断は行いますが、マークアップの位置づけが正しいか・妥当であるかまでは判断はしないということですので、そこは制作者の判断に委ねられるようです。

まずはここを目指し修正を図っていきましょう。

バリデートサイト

The W3c Markup Validation Service

Validator.nu (X)HTML5 Validator (Living Validator)