HTMLバリデータ入門！作り方・使い方・カスタマイズ完全ガイド5選 – Japanシーモア

HTMLバリデータ入門！作り方・使い方・カスタマイズ完全ガイド5選

初心者向けHTMLバリデータガイドHTML
2023.04.06
この記事は約6分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

このサービスは複数のSSPによる協力の下、運営されています。

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

この記事を読めば、HTMLバリデータの作り方や使い方、カスタマイズ方法が身につくこと間違いなしです！

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事では、HTMLバリデータの作り方や使い方、カスタマイズ方法について徹底的に解説していきます。

サンプルコードも5つ用意しているので、初心者の方でも簡単に理解できる内容になっています。

●HTMLバリデータとは

HTMLバリデータは、HTMLコードをチェックし、構文エラーや非標準なコードがないか検証するツールです。

これによって、ウェブページの品質を向上させることができます。

○バリデータの意義

HTMLバリデータを使用することで、ウェブページのエラーを見つけやすくなり、ブラウザ間の互換性問題やアクセシビリティの向上にも繋がります。

また、SEOにも効果があるとされています。

●HTMLバリデータの作り方

HTMLバリデータは、オンライン上で無料で利用できるものや、ダウンロードしてローカルで使用できるものがあります。

ここでは、オンライン上で利用できるW3Cのバリデータを例に解説します。

  1. W3Cのバリデータ（https://validator.w3.org/)にアクセスします。
  2. 「Validate by URI」タブを選択し、ウェブページのURLを入力します。
  3. 「Check」ボタンをクリックして、バリデーションを開始します。

これだけで、HTMLコードの検証ができます。

●HTMLバリデータの使い方

○サンプルコード1：HTMLファイルを検証する

下記のHTMLコードを例に、バリデータの使い方を説明します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルページ</title>
</head>
<body>
  <h1>サンプルページ</h1>
  <p>これはサンプルページです。</p>
</body>
</html>

W3Cのバリデータで上記のコードを検証すると、エラーがないことが確認できます。

○サンプルコード2：エラー箇所の特定

次に、エラーが含まれるHTMLコードを例に、バリデータでエラー箇所を特定する方法を解説します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルページ</title>
</head>
<body>
  <h1>サンプルページ</h1>
  <p>これはサンプルページです。</p>
  <img src="sample.jpg" alt="サンプル画像">
</body>
</html>

上記のコードでは、imgタグが閉じられていないため、バリデータでエラーが検出されます。

エラー箇所は、バリデータの結果ページで確認できます。

●HTMLバリデータのカスタマイズ

○サンプルコード3：独自ルールの追加

HTMLバリデータは、独自のルールを追加して、より厳密な検証ができるようにカスタマイズすることができます。

次は、独自ルールを追加する例です。

  1. W3Cのバリデータの「More Options」を開きます。
  2. 「Custom Validation」欄に、独自のルールを記述します。
  3. 「Check」ボタンをクリックして、バリデーションを開始します。

この方法で、独自のルールに基づいてHTMLコードの検証が行えます。

●HTMLバリデータの応用例

○サンプルコード4：ウェブアプリケーションでの利用

HTMLバリデータは、ウェブアプリケーション開発時にも役立ちます。

下記は、JavaScriptでHTMLバリデータを利用する例です。

fetch('https://validator.w3.org/nu/?out=json&doc=' + encodeURIComponent('<!DOCTYPE html><html lang="ja">…</html>'))
  .then(response => response.json())
  .then(data => {
    if (data.messages.length === 0) {
      console.log('バリデーション成功！');
    } else {
      console.error('バリデーションエラー：', data.messages);
    }
  });

このコードでは、fetch関数を使ってW3CのバリデータAPIにアクセスし、HTMLコードを検証しています。

○サンプルコード5：自動化ツールと組み合わせる

HTMLバリデータは、自動化ツールと組み合わせることで、開発プロセスの効率化が図れます。

Gulpを使ってバリデーションを自動化する例を紹介します。

const gulp = require('gulp');
const htmlValidator = require('gulp-w3c-html-validator');

gulp.task('validate-html', () => {
  return gulp.src('src/**/*.html')
    .pipe(htmlValidator())
    .pipe(htmlValidator.reporter());
});

gulp.task('default', gulp.series('validate-html'));

このコードでは、Gulpを使ってHTMLファイルをバリデータにかけ、結果を出力しています。

●注意点と対処法

HTMLバリデータを使用する際の注意点として、次の点が挙げられます。

  1. バリデータのエラーメッセージは、技術的な言葉が多く、初心者には理解しにくい場合があります。
    そのため、エラーメッセージを理解するために、基本的なHTMLの知識を身につけておくことが重要です。
  2. バリデータはあくまで機械的なチェックであり、実際のブラウザでの表示や動作を保証するものではありません。
    そのため、バリデーションを通過しても、ブラウザでの確認は必須です。

対処法として、次の点に注意しましょう。

  1. エラーメッセージが理解できない場合は、インターネットで調べるか、知人や専門家に相談しましょう。
  2. バリデータの結果だけでなく、主要なブラウザでの動作確認を行いましょう。

まとめ

この記事を読めば、HTMLバリデータの作り方や使い方、注意点などを理解し、実践できるようになります。

バリデータを活用して、エラーのない正確なHTMLコードを書くことで、ウェブページの品質を向上させることができます。

応用例やカスタマイズを通じて、開発効率も向上させることが可能です。

バリデータを上手に活用し、より優れたウェブページを制作しましょう。