今日の人気記事

  1. Sublime Text 3 の日本語化 - Japanize のインストール
  2. Sublime Text - Package Control のインストール
  3. Windows - Sublime Text 3 のダウンロードとインストール
  4. Mac - テキストエディタ「Atom」のインストール
  5. Chrome拡張機能「Window Resizer」 - ブラウザをデバイスごとの画面サイズへ変更

HTML の構文チェック - W3C Markup Validation Service

スポンサーリンク

ここでは、HTML の構文チェックができる W3C のWeb サービス「W3C Markup Validation Service」を紹介します。

html-w3c-markup-validation-service-01
「W3C Markup Validation Service」にアクセスすると、このような英語のページが表示されます。

html-w3c-markup-validation-service-02
まずは、上部のタブをみてみましょう。以下の3つの方法から HTML の構文チェックをすることができあます。

  • Validate by URI
    URI を入力すると、Web 上に公開されているページの構文チェックをすることができます。
  • Validate by File Upload
    HTML ファイルをアップロードすると、そのファイルの構文チェックをすることができます。
  • Validate by Direct Input
    入力フォームに入力した HTML の構文をチェックすることができます。

ここでは「Validate by URI」の使い方をみていきます。ほかの使い方もだいたい同じです。

スポンサーリンク

W3C Markup Validation Service の使い方

html-w3c-markup-validation-service-03
HTML の構文をチェックしたい URI を「Address」に入力し、

html-w3c-markup-validation-service-04
「Check」をクリックします。

html-w3c-markup-validation-service-05
すると、このように「Errors found ……」といったページが表示されます。

※ 構文チェックしたページにエラーがなければ「This ducument was successfully…」というページが表示されます。

それではページの見方をみていきます。

html-w3c-markup-validation-service-06
まずは、このテーブル。

Result:構文チェックの結果です。
Address:入力したアドレスです。
Encoding:文字のエンコーディングです。
Doctype:HTML のバージョンです。
Root Element:ドキュメントのはじめにある要素です。

html-w3c-markup-validation-service-07
構文チェックのオプションです。

  • Show Source
    エラーリストの下部にソースコードを表示します。
  • Show Outline
    h1 から h6 のアウトラインを表示します。
  • Validate error pages
    エラーページの構文チェックをします。例えば、404のページ。
  • Verbose Output
    エラーに対してより多くの説明・提案をします。
  • ListMessages Sequentially
    エラーごとに表示します。
  • Group Error Messages by Type
    エラータイプごとに表示します。
  • HTML Tidy
    HTML Tidy というサードパーティーの ソフトを使って、HTML を修正・インデントスタイルを整えます。

html-w3c-markup-validation-service-08
さて、ページを下へスクロールしてみましょう。

html-w3c-markup-validation-service-09
すると、このようにチェックしたページのエラーリストがずらずらと表示されます。

エラーをいくつかみてみましょう。

html-w3c-markup-validation-service-10
属性の間にスペースがありません。
(No space between attributions.)

html-w3c-markup-validation-service-11
ID が重複しています。
(Duplicate ID.)

html-w3c-markup-validation-service-12
align 属性は非推奨です。
(The align attribute on the div element is obsolete.)

このようにさまざまエラーをチェックしてくれます。

html-w3c-markup-validation-service-13
これらを修正したら「Revalidate」ボタンをクリックしましょう。

html-w3c-markup-validation-service-14
エラーが適切に修正されると「This document was successfully …」というページが表示されます。

スポンサーリンク